Auto Login

Enforce authentication everywhere in your app.

Auto Login is a mode in oidc-spa designed for applications where every page requires authentication.

This is typically the case for admin dashboards or enterprise-grade apps.

When Auto Login is enabled, visiting your application automatically redirects the user to the IdP’s login page if no active session is detected.

import { createOidc } from "oidc-spa/core";

const oidc = await createOidc({
    // ...
    autoLogin: true
});

src/oidc.ts

 import { oidcSpa } from "oidc-spa/react-tanstack-start";
 
 export const {
     bootstrapOidc,
     createOidcComponent,
     getOidc,
     oidcFnMiddleware,
     oidcRequestMiddleware,
-     enforceLogin
+    OidcInitializationGate
 } = oidcSpa
     .withExpectedDecodedIdTokenShape({ /* ... */ })
     .withAccessTokenValidation({ /* ... */ })
+    .withAutoLogin()
     .createUtils();

src/routes/__root.tsx

import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";

import Header from "@/components/Header";
import { AutoLogoutWarningOverlay } from "@/components/AutoLogoutWarningOverlay";
import { OidcInitializationGate } from "@/oidc";

export const Route = createRootRoute({
    // ...
    shellComponent: RootDocument
});

function RootDocument({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body>
                <div className="min-h-screen flex flex-col">
                    <Header />
                    <main className="flex flex-1 flex-col">
                        <OidcInitializationGate 
                            pendingComponent={()=> <Spinner />} // Optional
                        >
                            {children}
                        </OidcInitializationGate>
                    </main>
                </div>
                <AutoLogoutWarningOverlay />
                <Scripts />
            </body>
        </html>
    );
}

You can remove all the assertin your oidc component, the components specifically for the not logged in state can be removed.

src/components/Header.tsx

import { createOidcComponent } from "@/oidc";

-const AuthButtons = createOidcComponent({
-    pendingComponent: () => <Spinner />,
-    component: () => {
-        const { isUserLoggedIn } = AuthButtons.useOidc();
-
-        return isUserLoggedIn ? <LoggedInAuthButton /> : <NotLoggedInAuthButton />;
-    }
-});

-const LoggedInAuthButton = createOidcComponent({
+const AuthButtons = createOidcComponent({
+    pendingComponent: () => <Spinner />,
-    assert: "user logged in",
    component: () => {
        const { logout } = LoggedInAuthButton.useOidc();

        return <button onClick={() => logout({ redirectTo: "home" })}>Logout</button>;
    }
});

-const NotLoggedInAuthButton = createOidcComponent({
-    assert: "user not logged in",
-    component: () => {
-        const { login } = NotLoggedInAuthButton.useOidc();
-
-        return <button onClick={() => login()}> Login </button>;
-    }
-});

You can remove the assert: "user logged in" from oidcFnMiddleware and oidcRequestMiddleware:

-oidcFnMiddleware({ assert: "user logged in" })
+oidcFnMiddleware({ assert: "user logged in" })

-oidcRequestMiddleware({ assert: "user logged in" })
+oidcRequestMiddleware()

You can remove all the beforeLoad: enforceLogin:

 export const Route = createFileRoute("/demo/start/api-request")({
-    beforeLoad: enforceLogin,
     loader: async () => { }, 
     pendingComponent: () => <Spinner />,
     component: Home
 });

src/oidc.ts

 export const {
     bootstrapOidc,
     useOidc,
     getOidc,
     OidcInitializationGate
-    withLoginEnforced,
-    enforceLogin
 } = oidcSpa
     .withExpectedDecodedIdTokenShape({ /* ... */ })
+    .withAutoLogin()
     .createUtils();

You can then proceed to remove all the usage of withLoginEnforced and enforceLogin throughout your codebase. You can also remove all the assetion of the login state of the user:

- useOidc({ assert: "user logged in" });
+ useOidc();

All the components with useOidc({ assert: "user not logged in" }); can be removed.

src/app/services/oidc.service.ts

@Injectable({ providedIn: 'root' })
export class Oidc extends AbstractOidcService<DecodedIdToken> {
  // ...
  override autoLogin = true;
}

All the handling for the user not logged in state can be removed.

src/app/app.html

-@if (oidc.isUserLoggedIn) {
 <div>
       <span>Hello {{ oidc.$decodedIdToken().name }}</span>
       <button (click)="oidc.logout({ redirectTo: 'home' })">Logout</button>
 </div>
-} @else {
-<div>
-      <button (click)="oidc.login()">Login</button>
-</div>
-}

You can remove the usage of Oidc.enforceLoginGuard:

src/app/app.routes.ts

-canActivate: [Oidc.enforceLoginGuard],
//...
 canActivate: [
   async (route) => {
     const oidc = inject(Oidc);
     const router = inject(Router);
-    await Oidc.enforceLoginGuard(route);   
     //...
  },
],

PreviousOther OIDC Provider NextAuto Logout

Last updated 4 hours ago

Was this helpful?