Fusion Framework is a collection of libraries for helping developers create applications for the Fusion eco-system.

develop once, run anywhere

Our vision is to provide an framework which is the foundation for all applications and portals within the eco system.

Our philosophy is to create small stand-alone modules which the developers can use in portals and application. read more about modules

Fusion React App

Package for developing applications that uses the @equinor/fusion-framework.

Configure

// config.ts
import { AppConfigurator } from '@equinor/fusion-framework-react-app';
const configCallback: AppConfigurator = (configurator) => {
 configurator.http.configureClient(
    'bar', {
      baseUri: 'https://somewhere-test.com',
      defaultScopes: ['foo/.default']
    }
  );
};

// App.tsx
export const App = () => {
  const client = useHttpClient('bar');
  const [foo, setFoo] = useState('no value');
  const onClick = useCallback(() => {
    client.fetchAsync('api').then(x => x.json).then(setFoo);
  }, [client]);
  return <Button onClick={onClick}>{foo}</Button>
}

// index.ts
import { createApp } from '@equinor/fusion-framework-react-app';
export const render = createApp(App, configCallback);
export default render;

Hooks

useModule

import { useModule } from '@equinor/fusion-framework-react-app';
const ShowToken = () => {
  const auth = useModule('auth');
  const [token, setToken] = useState<string>('');
  useEffect(() => {
    auth.acquireAccessToken().then(setToken);
  }, [auth]);
  return <span>{token ?? 'fetching token'}</span>
}

MSAL Authentication

Important

@equinor/fusion-framework-module-msal must be installed to make MSAL hooks available

Caution

Applications should NOT configure the MSAL module themselves. The MSAL module must be configured by the host/portal application for proper module hoisting. Apps should only use the hooks to access the already-configured MSAL module.

This package includes React hooks for Microsoft authentication using MSAL v4.

import { useCurrentAccount, useAccessToken, useToken } from '@equinor/fusion-framework-react-app/msal';

const scopes = ['User.Read', 'api.read'];

function MyComponent() {
  // Get current logged-in user
  const user = useCurrentAccount();
  
  // Get access token for API calls
  const { token: accessToken } = useAccessToken( { scopes } );
  
  // Get full token details
  const { token } = useToken( { scopes } );
  
  if (!user) return <div>Please log in</div>;
  return <div>Welcome, {user.name}!</div>;
}

📖 See MSAL Authentication Documentation for complete API reference, examples, and migration guide.

Http

useHttpClient

import { useHttpClient } from '@equinor/fusion-framework-react-app/http';
const App = () => {
  const fooClient = useHttpClient('foo');
  
  // using as stream
  useEffect(() => {
    const sub = client.fetch('api/all').subscribe((x) => {
      setFoo(x.json());
    });
    return () => sub.unsubscribe();
  },[fooClient]);

  // using as promise
  const barClient =  useHttpClient('bar');
  useCallback(async() => {
    const res = await portalClient.fetchAsync('api/bar');
    console.log(res.json());
  },[barClient]);
  
}

Feature Flag

Important

@equinor/fusion-framework-module-feature-flag must be installed to make this module available

Simple

import { enableFeatureFlag } from '@equinor/fusion-framework-react-app/feature-flag'; 
export const configure: ModuleInitiator = (appConfigurator, args) => {
  /** provide a list of features that should be available in the application */
  enableFeatureFlag(appConfigurator, [
    {
      key: MyFeatures.MyFlag,
      title: 'this is a flag',
    },
    {
      key: MyFeatures.MyUrlFlag,
      title: 'this feature can be toggled by ?my-url-flag=true',
      allowUrl: true,
    }
  ]);
}

Custom

export const configure: ModuleInitiator = (appConfigurator, args) => {
  appConfigurator.useFeatureFlags(builder => /** see module for building custom config */);
}

see module for more technical information;