Multiple instances?

[jamesmeneghello]

Thanks for the great library, took me some time to stumble across it but looks to be exactly what I need.

There doesn't appear to be support for multiple instances of the OIDC client, where a single SPA may need to authenticate against multiple different identity servers at the same time - do you have any ideas for how this could be worked around?

Similar to how https://github.com/AxaGuilDEv/react-oidc manages this: multiple configurations can be applied and then the hook can refer to a configuration to pull out a specific client instance.

[pamapa]

Untested idea: You could add per identity server one auth provider, nested. Then by using

react-oidc-context/src/AuthProvider.tsx

Lines 35 to 46 in fd24a70

	/**
	* By default, if the page url has code/state params, this provider will call automatically the userManager.signinCallback.
	* In some cases the code might be for something else (another OAuth SDK perhaps). In these
	* instances you can instruct the client to ignore them.
	*
	* ```jsx
	* <AuthProvider
	* skipSigninCallback={window.location.pathname === '/stripe-oauth-callback'}
	* >
	* ```
	*/
	skipSigninCallback?: boolean;

you must makes sure that the correct auth provider interacts when needed....

[jamesmeneghello]

Yeah, so far as I know there's no way to retrieve a parent if there are multiple nested providers of the same type - React overrides it and gives you the nearest provider.

[jamesmeneghello]

Well, got it working with the most terrible of PoC code, for anyone that's curious: basically, store the higher-level provider in a secondary context for later retrieval (in my case, the aptly-named StupidContext.

Top-level:

type WrapperProviderProps = {
    children: React.ReactElement;
};

function InternalContextSave(props: WrapperProviderProps) {
    const auth = useAuth();
    return (
        <StupidContext.Provider value={auth}>
            {props.children}
        </StupidContext.Provider>
    );
}

function WrapperProvider(props: WrapperProviderProps) {
    return (
        <AuthProvider
            {...{
                authority: `${getEnvironmentVariable(
                    'VITE_KEYCLOAK_URL',
                )}/realms/${getEnvironmentVariable(
                    'VITE_KEYCLOAK_SECOND_REALM',
                )}`,
                client_id: getEnvironmentVariable(
                    'VITE_KEYCLOAK_SECOND_CLIENT_ID',
                ),
                redirect_uri: 'http://localhost:3000/second',
                silent_redirect_uri: 'http://localhost:3000/second',
            }}
            skipSigninCallback={window.location.pathname !== '/second'}
            onSigninCallback={(user) => {
                window.history.replaceState(
                    {},
                    document.title,
                    window.location.pathname,
                );
            }}
            loadUserInfo
        >
            <InternalContextSave>{props.children}</InternalContextSave>
        </AuthProvider>
    );
}

ReactDOM.render(
    <React.StrictMode>
        <WrapperProvider>
            <AuthProvider
                {...{
                    authority: `${getEnvironmentVariable(
                        'VITE_KEYCLOAK_URL',
                    )}/realms/${getEnvironmentVariable('VITE_KEYCLOAK_REALM')}`,
                    client_id: getEnvironmentVariable(
                        'VITE_KEYCLOAK_CLIENT_ID',
                    ),
                    redirect_uri: 'http://localhost:3000/first',
                    silent_redirect_uri: 'http://localhost:3000/first',
                }}
                skipSigninCallback={window.location.pathname !== '/first'}
                onSigninCallback={(user) => {
                    window.history.replaceState(
                        {},
                        document.title,
                        window.location.pathname,
                    );
                }}
                loadUserInfo

                // automaticSilentRenew
            >
                <App />
            </AuthProvider>
        </WrapperProvider>
    </React.StrictMode>,
    document.getElementById('root'),
);

Less high-level:

    useEffect(() => {
        if (!isLoading && !isAuthenticated) {
            window.sessionStorage.setItem(
                'redirectTo',
                `${location.pathname}${location.search}`,
            );
            signinRedirect();
        }
    }, [isLoading, isAuthenticated]);

    const secondAuth = useStupid();
    useEffect(() => {
        if (!secondAuth?.isLoading && !secondAuth?.isAuthenticated) {
            secondAuth?.signinRedirect();
        }
    }, [secondAuth?.isLoading, secondAuth?.isAuthenticated]);

Thanks for the idea!

[pamapa]

Thanks for sharing the solution!

[kherock]

I don't think this has a very satisfying solution yet; we can keep this open.

The real issue is that we don't expose a way to obtain a ref to the auth context without a child component using the hook. Ideally, something like this should be possible:

import React, { createContext, useCallback, useContext } from 'react'
import { AuthProvider } from 'react-oidc-context';

const multiAuthContext = createContext(new Map());

function useMultiAuth(authority) {
  const auth = useContext(multiAuthContext).get(authority);
  if (!auth) throw new Error(`No authority configuration for ${authority}`);
  return auth;
}

function MyComponent() {
  const auth = useMultiAuth("https://authority1");
  useEffect(() => {
    auth.signinRedirect();
  }, []);
}

function App() {
  const authoritiesRef = useRef(new Map());
  const registerAuthority = useCallback(auth => authorities.set(auth.settings.authority, auth));

  return (
    <multiAuthContext.Provider value={authoritiesRef.current}>
      <AuthProvider ref={registerAuthority} authority="https://authority1" client_id="clientId1" />
      <AuthProvider ref={registerAuthority} authority="https://authority2" client_id="clientId2" />
      <MyComponent />
    </multiAuthContext.Provider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

[Kaspar-Metsa]

Bumping this thread: the possibility of changing authority conditionally dynamically would be very useful because for example keycloak has the notion of realms and it is a normal use case to change authority, otherwise user needs to save realm in localStorage or a cookie or sessionStorage.

[satanshiro]

Bumping this thread: the possibility of changing authority conditionally dynamically would be very useful because for example keycloak has the notion of realms and it is a normal use case to change authority, otherwise user needs to save realm in localStorage or a cookie or sessionStorage.

A better example would be integration with third party apps using oauth such as jira, in rare cases you would need several oidc client instances for the same keycloak instance. I will make a poc myself and see if I get a better solution

[KasparMetsa]

Nice @satanshiro looking forward!