@axa-fr/react-oidc 6.6.0 → 6.6.2-alpha0

package/src/oidc/FetchToken.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import Oidc from "./vanilla/oidc";
+import {isTokensValid} from "./vanilla/parseTokens";
+import {sleepAsync} from "./vanilla/initWorker";
+
+export type Fetch = typeof window.fetch;
+export interface ComponentWithOidcFetchProps {
+  fetch?: Fetch;
+}
+const defaultConfigurationName = "default";
+
+const fetchWithToken = (fetch: Fetch, getOidcWithConfigurationName: () => Oidc | null) => async (
+    url: RequestInfo,
+    options: RequestInit = { method: 'GET' }
+) => {
+  let headers = new Headers();
+  const optionTmp = { ...options };
+
+  if (optionTmp.headers) {
+    headers = !(optionTmp.headers instanceof Headers)
+        ? new Headers(optionTmp.headers)
+        : optionTmp.headers;
+  }
+  const oidc = getOidcWithConfigurationName();
+  
+  
+
+  // @ts-ignore
+  const accessToken = oidc.tokens ? oidc.tokens.accessToken : null;
+  // We wait  the synchronisation before making a request
+  while (oidc.tokens && accessToken && !isTokensValid(oidc.tokens)){
+    await sleepAsync(200);
+  }
+  if (!headers.has('Accept')) {
+    headers.set('Accept', 'application/json');
+  }
+  if (accessToken) {
+    headers.set('Authorization', `Bearer ${accessToken}`);
+    if (!optionTmp.credentials) {
+      optionTmp.credentials = 'same-origin';
+    }
+  }
+  const newOptions = { ...optionTmp, headers };
+  return await fetch(url, newOptions);
+};
+
+export const withOidcFetch = (fetch:Fetch=null, configurationName=defaultConfigurationName) => (
+    WrappedComponent
+  ) => (props: ComponentWithOidcFetchProps) => {
+    const {fetch:newFetch} = useOidcFetch(fetch || props.fetch, configurationName)
+    return <WrappedComponent {...props} fetch={newFetch} />;
+  };
+
+
+export const useOidcFetch =(fetch:Fetch=null, configurationName=defaultConfigurationName) =>{
+  const previousFetch = fetch || window.fetch;
+  const getOidc =  Oidc.get;
+  const getOidcWithConfigurationName = () => { return getOidc(configurationName); };
+  const newFetch = fetchWithToken(previousFetch, getOidcWithConfigurationName);
+  return { fetch:newFetch };
+}

package/src/oidc/OidcProvider.tsx

@@ -0,0 +1,206 @@
+import React, {ComponentType, FC, PropsWithChildren, useEffect, useState} from 'react';
+import Oidc, {OidcConfiguration} from './vanilla/oidc';
+import OidcRoutes from './core/routes/OidcRoutes';
+import {Authenticating, AuthenticateError, SessionLost, Loading, CallBackSuccess} from './core/default-component/index';
+import ServiceWorkerNotSupported from "./core/default-component/ServiceWorkerNotSupported.component";
+import AuthenticatingError from "./core/default-component/AuthenticateError.component";
+import { CustomHistory } from "./core/routes/withRouter";
+
+export type oidcContext = {
+    getOidc: Function;
+};
+
+const defaultEventState = {name:"", data:null};
+
+export type OidcProviderProps = {
+    callbackSuccessComponent?: ComponentType<any>;
+    sessionLostComponent?: ComponentType<any>;
+    authenticatingComponent?: ComponentType<any>;
+    authenticatingErrorComponent?: ComponentType<any>;
+    loadingComponent?: ComponentType<any>;
+    serviceWorkerNotSupportedComponent?: ComponentType<any>;
+    configurationName?: string;
+    configuration?: OidcConfiguration;
+    children: any;
+    onSessionLost?: Function,
+    onLogoutFromAnotherTab?:Function,
+    onLogoutFromSameTab?:Function,
+    withCustomHistory?: () => CustomHistory,
+    onEvent?:Function
+};
+
+export type OidcSessionProps = {
+    configurationName: string;
+    loadingComponent: PropsWithChildren<any>;
+};
+
+
+const OidcSession : FC<PropsWithChildren<OidcSessionProps>> = ({loadingComponent, children, configurationName}) =>{
+    const [loading, setLoading] = useState(true);
+    const getOidc =  Oidc.get;
+    const oidc = getOidc(configurationName);
+    useEffect(() => {
+        let isMounted = true;
+        if(oidc) {
+            oidc.tryKeepExistingSessionAsync().then(() => {
+                if (isMounted) {
+                    setLoading(false);
+                }
+            })
+        }
+        return () => {
+            isMounted = false;
+        }
+    }, [oidc, configurationName]);
+    const LoadingComponent = loadingComponent;
+    return (
+        <>
+            {loading ? (
+               <LoadingComponent configurationName={configurationName}/>
+            ) : (
+                <>{children}</>
+            )}
+        </>
+    );
+}
+
+const Switch = ({isLoading, loadingComponent, children, configurationName}) => {
+    const LoadingComponent = loadingComponent;
+    if(isLoading){
+        return <LoadingComponent configurationName={configurationName}>{children}</LoadingComponent>;
+    }
+    return <>{children}</>;
+}
+
+
+export const OidcProvider : FC<PropsWithChildren<OidcProviderProps>>  = ({ children, 
+                                                                             configuration, 
+                                                                             configurationName = "default", 
+                                                                             callbackSuccessComponent = CallBackSuccess, 
+                                                                             authenticatingComponent = Authenticating,
+                                                                             loadingComponent = Loading,
+                                                                             serviceWorkerNotSupportedComponent = ServiceWorkerNotSupported,
+                                                                             authenticatingErrorComponent = AuthenticatingError,
+                                                                             sessionLostComponent=SessionLost,
+                                                                             onSessionLost=null,
+                                                                             onLogoutFromAnotherTab=null,
+                                                                             onLogoutFromSameTab=null,
+                                                                             withCustomHistory=null,
+                                                                             onEvent=null,
+                                                                         }) => {
+    const getOidc =(configurationName="default") => {
+        return Oidc.getOrCreate(configuration, configurationName);
+    }
+    const [loading, setLoading] = useState(true);
+    const [event, setEvent] = useState(defaultEventState);
+    const [currentConfigurationName, setConfigurationName] = useState("default");
+
+    useEffect(() => {
+        const oidc = getOidc(configurationName);
+        const newSubscriptionId = oidc.subscriveEvents((name, data) => {
+            if(onEvent)
+            {
+                onEvent(configurationName, name, data);
+            }
+        });
+        return () => {
+            const previousOidc = getOidc(configurationName);
+            previousOidc.removeEventSubscription(newSubscriptionId);
+        }
+    }, [configurationName, onEvent]);
+
+    useEffect(() => {
+        const oidc = getOidc(configurationName);
+        const newSubscriptionId = oidc.subscriveEvents((name, data) => {
+            if(name == Oidc.eventNames.refreshTokensAsync_error || name == Oidc.eventNames.syncTokensAsync_error){
+                if(onSessionLost != null){
+                    onSessionLost();
+                    return;
+                }
+                setEvent({name, data});
+            }
+            else if(name === Oidc.eventNames.logout_from_another_tab){
+                if(onLogoutFromAnotherTab != null){
+                    onLogoutFromAnotherTab();
+                    return;
+                }
+                setEvent({name, data});
+            }
+            else if(name === Oidc.eventNames.logout_from_same_tab){
+                if(onLogoutFromSameTab != null){
+                    onLogoutFromSameTab();
+                    return;
+                }
+                //setEvent({name, data});
+            }
+            else if (name == Oidc.eventNames.loginAsync_begin
+                || name == Oidc.eventNames.loginCallbackAsync_end
+                || name == Oidc.eventNames.loginAsync_error
+                || name == Oidc.eventNames.loginCallbackAsync_error
+            ) {
+                setEvent({name, data});
+            } else if (name == Oidc.eventNames.service_worker_not_supported_by_browser && configuration.service_worker_only === true) {
+                setEvent({name, data});
+            }
+        });
+        
+        setConfigurationName(configurationName);
+        setLoading(false);
+        return () => {
+            const previousOidc = getOidc(configurationName);
+            previousOidc.removeEventSubscription(newSubscriptionId);
+            setEvent(defaultEventState);
+        }
+    }, [configuration, configurationName]);
+
+    
+    const SessionLostComponent = sessionLostComponent;
+    const AuthenticatingComponent = authenticatingComponent;
+    const LoadingComponent = loadingComponent;
+    const ServiceWorkerNotSupportedComponent = serviceWorkerNotSupportedComponent;
+    const AuthenticatingErrorComponent = authenticatingErrorComponent;
+
+    const isLoading = (loading || (currentConfigurationName != configurationName ));
+    const oidc = getOidc(configurationName);
+    let eventName = event.name;
+    switch(eventName){
+        case Oidc.eventNames.service_worker_not_supported_by_browser:
+            return <Switch loadingComponent={LoadingComponent} isLoading={isLoading} configurationName={configurationName}>
+                <ServiceWorkerNotSupportedComponent configurationName={configurationName} />
+            </Switch>;
+        case Oidc.eventNames.loginAsync_begin:
+            return  <Switch loadingComponent={LoadingComponent} isLoading={isLoading} configurationName={configurationName}>
+                <AuthenticatingComponent configurationName={configurationName} />
+            </Switch>;
+        case Oidc.eventNames.loginAsync_error:
+        case Oidc.eventNames.loginCallbackAsync_error:
+            return <Switch loadingComponent={LoadingComponent} isLoading={isLoading} configurationName={configurationName}>
+                <AuthenticatingErrorComponent configurationName={configurationName} />
+            </Switch>;
+        case Oidc.eventNames.refreshTokensAsync_error:
+        case Oidc.eventNames.syncTokensAsync_error:
+        case Oidc.eventNames.logout_from_another_tab:
+            return <Switch loadingComponent={LoadingComponent} isLoading={isLoading} configurationName={configurationName}>
+                <SessionLostComponent configurationName={configurationName} /> 
+            </Switch>;
+        default:
+            return (
+                <Switch loadingComponent={LoadingComponent} isLoading={isLoading} configurationName={configurationName}>
+                      <OidcRoutes redirect_uri={oidc.configuration.redirect_uri}
+                                  silent_redirect_uri={oidc.configuration.silent_redirect_uri}
+                                  silent_login_uri={oidc.configuration.silent_login_uri}
+                                  callbackSuccessComponent={callbackSuccessComponent} 
+                                  callbackErrorComponent={authenticatingErrorComponent}
+                                  authenticatingComponent={authenticatingComponent}
+                                  configurationName={configurationName}
+                                  withCustomHistory={withCustomHistory}>
+                          <OidcSession loadingComponent={LoadingComponent} configurationName={configurationName}>
+                            {children}
+                          </OidcSession>
+                      </OidcRoutes>
+                </Switch>
+            );
+    }
+};
+
+export default OidcProvider;

package/src/oidc/OidcSecure.tsx

@@ -0,0 +1,37 @@
+import React, {useEffect, PropsWithChildren, FC} from 'react';
+
+import Oidc, {StringMap} from "./vanilla/oidc";
+
+export type OidcSecureProps = {
+    callbackPath?:string;
+    extras?:StringMap
+    configurationName?: string;
+    state?: string|undefined;
+};
+
+export const OidcSecure: FC<PropsWithChildren<OidcSecureProps>> = ({children, callbackPath=null, extras=null, configurationName="default"}) => {
+    const getOidc =  Oidc.get;
+    const oidc = getOidc(configurationName);
+    useEffect(() => {
+        if(!oidc.tokens){
+            oidc.loginAsync(callbackPath, extras);
+        }
+        return () => {
+        }
+    }, [configurationName, callbackPath, extras])
+
+    if(!oidc.tokens){
+      return null;
+    }
+    return <>{children}</>
+}
+
+export const withOidcSecure = (
+  WrappedComponent: FC<PropsWithChildren<OidcSecureProps>>, 
+  callbackPath=null,
+  extras=null, 
+  configurationName="default", 
+  state: string|undefined=undefined
+) => (props) => {
+  return <OidcSecure state={state} callbackPath={callbackPath} extras={extras} configurationName={configurationName}><WrappedComponent {...props} /></OidcSecure>;
+};

package/src/oidc/ReactOidc.tsx

@@ -0,0 +1,139 @@
+import React, {useEffect, useState} from 'react';
+import Oidc, {StringMap} from "./vanilla/oidc";
+
+const defaultConfigurationName = "default";
+
+const defaultIsAuthenticated = (getOidc, configurationName) =>{
+    let isAuthenticated:boolean = false;
+    const oidc = getOidc(configurationName);
+    if(oidc){
+        isAuthenticated = getOidc(configurationName).tokens != null;
+    }
+    return isAuthenticated;
+}
+
+export const useOidc =(configurationName=defaultConfigurationName) =>{
+    const getOidc =  Oidc.get;
+    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(defaultIsAuthenticated(getOidc, configurationName));
+
+    useEffect(() => {
+        let isMounted = true;
+        const oidc = getOidc(configurationName);
+        setIsAuthenticated(defaultIsAuthenticated(getOidc, configurationName));
+        const newSubscriptionId = oidc.subscriveEvents((name, data) => {
+            if(name === Oidc.eventNames.logout_from_another_tab || name === Oidc.eventNames.logout_from_same_tab || name === Oidc.eventNames.token_aquired){
+                if(isMounted) {
+                    setIsAuthenticated(defaultIsAuthenticated(getOidc, configurationName));
+                }
+            }
+        });
+        return () => {
+            isMounted = false;
+            oidc.removeEventSubscription(newSubscriptionId);
+        };
+    }, [configurationName]);
+
+    const login = (callbackPath:string | undefined = undefined, extras:StringMap=null, silentLoginOnly = false) => {
+        return getOidc(configurationName).loginAsync(callbackPath, extras, false, undefined, silentLoginOnly);
+    };
+    const logout = (callbackPath: string | null | undefined = undefined, extras:StringMap=null) => {
+        return getOidc(configurationName).logoutAsync(callbackPath, extras);
+    };
+    const renewTokens = (extras:StringMap=null) => {
+        return getOidc(configurationName).renewTokensAsync(extras);
+    };
+    return { login, logout, renewTokens, isAuthenticated };
+}
+
+const accessTokenInitialState = {accessToken:null, accessTokenPayload:null};
+
+const initTokens = (configurationName) => {
+    const getOidc =  Oidc.get;
+    const oidc = getOidc(configurationName);
+    if(oidc.tokens) {
+        const tokens = oidc.tokens;
+        return {accessToken :tokens.accessToken, accessTokenPayload: tokens.accessTokenPayload }
+    }
+    return accessTokenInitialState;
+}
+
+export type OidcAccessToken = {
+    accessToken?: any,
+    accessTokenPayload?: any
+}
+
+export const useOidcAccessToken =(configurationName=defaultConfigurationName) =>{
+    const getOidc =  Oidc.get;
+    const [state, setAccessToken] = useState<OidcAccessToken>(initTokens(configurationName));
+
+    useEffect(() => {
+        let isMounted = true;
+        const oidc = getOidc(configurationName);
+        if(oidc.tokens) {
+            const tokens = oidc.tokens;
+            setAccessToken({accessToken :tokens.accessToken, accessTokenPayload: tokens.accessTokenPayload });
+        }
+        const newSubscriptionId = oidc.subscriveEvents((name, data) => {
+            if(name == Oidc.eventNames.token_renewed
+                || name == Oidc.eventNames.token_aquired 
+                || name === Oidc.eventNames.logout_from_another_tab
+                || name === Oidc.eventNames.logout_from_same_tab){
+                if(isMounted) {
+                    const tokens = oidc.tokens;
+                    setAccessToken(tokens != null  ? {accessToken :tokens.accessToken, accessTokenPayload: tokens.accessTokenPayload } : accessTokenInitialState);
+                }
+            }
+        });
+        return  () => {
+            isMounted = false;
+            oidc.removeEventSubscription(newSubscriptionId);
+        };
+    }, [configurationName]);
+    return state;
+}
+
+const idTokenInitialState = {idToken:null, idTokenPayload:null};
+
+const initIdToken= (configurationName) =>{
+    const getOidc =  Oidc.get;
+    const oidc = getOidc(configurationName);
+    if(oidc.tokens) {
+        const tokens = oidc.tokens;
+        return { idToken: tokens.idToken, idTokenPayload:tokens.idTokenPayload };
+    }
+    return idTokenInitialState
+}
+
+export type OidcIdToken = {
+    idToken?: any,
+    idTokenPayload?: any
+}
+
+export const useOidcIdToken =(configurationName= defaultConfigurationName) =>{
+    const getOidc =  Oidc.get;
+    const [state, setIDToken] = useState<OidcIdToken>(initIdToken(configurationName));
+
+    useEffect(() => {
+        let isMounted = true;
+        const oidc = getOidc(configurationName);
+        if(oidc.tokens) {
+            const tokens = oidc.tokens;
+            setIDToken({idToken: tokens.idToken, idTokenPayload:tokens.idTokenPayload});
+        }
+        const newSubscriptionId = oidc.subscriveEvents((name, data) => {
+            if(name == Oidc.eventNames.token_renewed
+                || name == Oidc.eventNames.token_aquired
+                || name === Oidc.eventNames.logout_from_another_tab){
+                if(isMounted) {
+                    const tokens = oidc.tokens;
+                    setIDToken(tokens != null  ? {idToken: tokens.idToken, idTokenPayload:tokens.idTokenPayload} : idTokenInitialState);
+                }
+            }
+        });
+        return () => {
+            isMounted = false;
+            oidc.removeEventSubscription(newSubscriptionId);
+        };
+    }, [configurationName]);
+    return state;
+}

package/src/oidc/User.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState} from "react";
+import Oidc from "./vanilla/oidc";
+
+export enum OidcUserStatus {
+    Unauthenticated= 'Unauthenticated',
+    Loading = 'Loading user',
+    Loaded = 'User loaded',
+    LoadingError = 'Error loading user'
+}
+
+export type OidcUser = {
+    user: any,
+    status: OidcUserStatus
+}
+
+export const useOidcUser = (configurationName="default") => {
+    const [oidcUser, setOidcUser] = useState<OidcUser>({user: null, status: OidcUserStatus.Unauthenticated});
+
+    const oidc = Oidc.get(configurationName);
+    useEffect(() => {
+        let isMounted = true;
+
+        if(oidc && oidc.tokens) {
+            setOidcUser({...oidcUser, status: OidcUserStatus.Loading});
+            oidc.userInfoAsync()
+                .then((info) => {
+                    if (isMounted) {
+                        setOidcUser({user: info, status: OidcUserStatus.Loaded});
+                    }
+                })
+                .catch(() => setOidcUser({...oidcUser, status: OidcUserStatus.LoadingError}));
+        }
+
+        return  () => { isMounted = false };
+    }, []);
+
+    return {oidcUser: oidcUser.user, oidcUserLoadingState: oidcUser.status}
+}

package/src/oidc/core/default-component/AuthenticateError.component.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {ComponentType} from "react";
+
+const AuthenticatingError: ComponentType<any> = () => (
+  <div className="oidc-authenticating">
+    <div className="oidc-authenticating__container">
+      <h1 className="oidc-authenticating__title">Error authentication</h1>
+      <p className="oidc-authenticating__content">An error occurred during authentication.</p>
+    </div>
+  </div>
+);
+
+export default AuthenticatingError;

package/src/oidc/core/default-component/Authenticating.component.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {ComponentType} from "react";
+
+const Authenticating : ComponentType<any> = () => (
+  <div className="oidc-authenticating">
+    <div className="oidc-authenticating__container">
+      <h1 className="oidc-authenticating__title">Authentication in progress</h1>
+      <p className="oidc-authenticating__content">You will be redirected to the login page.</p>
+    </div>
+  </div>
+);
+
+export default Authenticating;

package/src/oidc/core/default-component/Callback.component.tsx

@@ -0,0 +1,46 @@
+import React, {useEffect, useState, ComponentType} from 'react';
+import AuthenticatingError from "./AuthenticateError.component";
+import Oidc from "../../vanilla/oidc";
+import {getCustomHistory} from "../routes/withRouter";
+
+export const CallBackSuccess: ComponentType<any> = () =>  (<div className="oidc-callback">
+  <div className="oidc-callback__container">
+    <h1 className="oidc-callback__title">Authentication complete</h1>
+    <p className="oidc-callback__content">You will be redirected to your application.</p>
+  </div>
+</div>);
+
+const CallbackManager: ComponentType<any> = ({callBackError, callBackSuccess, configurationName, withCustomHistory }) => {
+
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    let isMounted = true;
+    const playCallbackAsync = async () => {
+      const getOidc =  Oidc.get;
+      try {
+        const {callbackPath} = await getOidc(configurationName).loginCallbackWithAutoTokensRenewAsync();
+        const history = (withCustomHistory)? withCustomHistory(): getCustomHistory();
+        history.replaceState(callbackPath || "/")
+      } catch (error) {
+          if(isMounted) {
+            setError(true);
+          }
+      }
+    };
+    playCallbackAsync();
+    return () => {
+      isMounted = false;
+    };
+  },[]);
+
+  const CallbackErrorComponent = callBackError || AuthenticatingError;
+  const CallbackSuccessComponent = callBackSuccess || CallBackSuccess;
+
+  if(error){
+    return <CallbackErrorComponent configurationName={configurationName} />
+  }
+  
+  return <CallbackSuccessComponent configurationName={configurationName} />;
+};
+
+export default CallbackManager;

package/src/oidc/core/default-component/Loading.component.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import {ComponentType} from "react";
+
+const Loading : ComponentType<any> = () => (
+  <span className="oidc-loading">
+    Loading
+  </span>
+);
+
+export default Loading;

package/src/oidc/core/default-component/ServiceWorkerNotSupported.component.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {ComponentType} from "react";
+
+const ServiceWorkerNotSupported : ComponentType<any> = () => (
+  <div className="oidc-serviceworker">
+    <div className="oidc-serviceworker__container">
+      <h1 className="oidc-serviceworker__title">Unable to authenticate on this browser</h1>
+      <p className="oidc-serviceworker__content">Your browser is not secure enough to make authentication work. Try updating your browser or use a newer browser.</p>
+    </div>
+  </div>
+);
+
+export default ServiceWorkerNotSupported;

package/src/oidc/core/default-component/SessionLost.component.tsx

@@ -0,0 +1,14 @@
+import React, {ComponentType} from 'react';
+
+export const SessionLost: ComponentType<any> = () => (
+  <div className="oidc-session-lost">
+    <div className="oidc-session-lost__container">
+      <h1 className="oidc-session-lost__title">Session timed out</h1>
+      <p className="oidc-session-lost__content">
+          Your session has expired. Please re-authenticate.
+      </p>
+    </div>
+  </div>
+);
+
+export default SessionLost;

package/src/oidc/core/default-component/SilentCallback.component.tsx

@@ -0,0 +1,22 @@
+import React, {useEffect, ComponentType} from 'react';
+import Oidc from "../../vanilla/oidc";
+
+const CallbackManager: ComponentType<any> = ({configurationName }) => {
+
+    useEffect(() => {
+        let isMounted = true;
+        const playCallbackAsync = async () => {
+            const getOidc =  Oidc.get;
+            const oidc = getOidc(configurationName);
+            oidc.silentLoginCallBackAsync();
+        };
+        playCallbackAsync();
+        return () => {
+            isMounted = false;
+        };
+    },[]);
+
+    return <></>;
+};
+
+export default CallbackManager;

package/src/oidc/core/default-component/SilentLogin.component.tsx

@@ -0,0 +1,35 @@
+import React, {useEffect, ComponentType} from 'react';
+import Oidc from "../../vanilla/oidc";
+import {getParseQueryStringFromLocation} from "../../vanilla/route-utils";
+
+
+const SilentLogin: ComponentType<any> = (({configurationName }) => {
+    const queryParams = getParseQueryStringFromLocation(window.location.href);
+
+    const getOidc =  Oidc.get;
+    const oidc = getOidc(configurationName);
+    
+    let extras = null;  
+
+    for (let [key, value] of Object.entries(queryParams)) {
+        if(key === "state" || key == "scope"){
+            continue;
+        }
+        if(extras === null){
+            extras = {};
+        }
+        extras[key] = value;
+    }
+    
+    useEffect(() => {
+        if(!oidc.tokens){
+            oidc.loginAsync(null, extras,  true, queryParams.scope);
+        }
+        return () => {
+        }
+    }, []);
+    
+    return <></>;
+});
+
+export default SilentLogin;

package/src/oidc/core/default-component/index.ts

@@ -0,0 +1,6 @@
+export { default as Authenticating } from './Authenticating.component';
+export { default as Callback, CallBackSuccess } from './Callback.component';
+export { default as SessionLost } from './SessionLost.component';
+export { default as Loading } from './Loading.component';
+export { default as AuthenticateError } from './AuthenticateError.component';
+export { default as ServiceWorkerNotSupported } from './ServiceWorkerNotSupported.component';