OIDC SPA
GitHubHome
v6
  • Documentation
  • Release Notes & Upgrade Instructions
v6
  • Installation
  • Basic Usage
  • Web API
  • Auto Login
  • Auto Logout
  • Error Management
  • Mock
  • User Account Management
  • User Session Initialization
  • Tokens Renewal
  • Setup Guides
    • React Router
    • TanStack Router
    • Full-Stack with Node REST API
  • Providers Configuration
    • Keycloak
    • Auth0
    • Microsoft Entra ID
    • Google OAuth 2.0
    • Other OIDC Provider
  • Resources
    • Why No Client Secret?
    • End of third-party cookies
    • JWT Of the Access Token
    • Discord Server
  • User Impersonation
  • Sponsors
Powered by GitBook
On this page

Was this helpful?

Export as PDF

User Session Initialization

In some cases, you might want to perform some actions when the user login to your app.

It might be clearing some storage values, or calling a specific API endpoint. If this action is costly. You might want to avoid doing it over and over again each time the user refresh the page.

import { createOidc } from "oidc-spa";

const oidc = await createOidc({ /* ... */ });

if (oidc.isUserLoggedIn) {
  if( oidc.isNewBrowerSession ){
     // This is a new visit of the user on your app
     // or the user signed out and signed in again with
     // an other identity.
     
     await api.onboard(); // (Example)
  }else{
     // It was just a page refresh (Ctrl+R)
  }
}
src/oidc.ts
import { createReactOidc } from "oidc-spa/react";

export const {
    /* ... */
    getOidc
} = createReactOidc({ /* ... */ });

getOidc().then(oidc => {
  
  if( oidc.isNewBrowerSession ){
     // This is a new visit of the user on your app
     // or the user signed out and signed in again with
     // an other identity.
     
     await api.onboard(); // (Example)
  }else{
     // It was just a page refresh (Ctrl+R)
  }

});

You can also do this in your React component (although it's maybe not the best approach)

import { useOidc } from "./oidc";
import { useEffect } from "react";

function MyComponent(){

    const { isUserLoggedIn, isNewBrowserSession, backFromAuthServer } = useOidc();
    
    useEffect(()=> {
    
        if( oidc.isNewBrowerSession ){
           // This is a new visit of the user on your app
           // or the user signed out and signed in again with
           // an other identity.
           
           api.onboard(); // (Example)
        }else{
           // It was just a page refresh (Ctrl+R)
        }
    
    }, []);
PreviousUser Account ManagementNextTokens Renewal

Last updated 2 months ago

Was this helpful?