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 common for admin dashboards or internal tools that don’t expose any public or “marketing” pages.

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

The goal of this mode is to simplify your app’s authentication model. In the regular mode, where you do have public pages, you need to:

Enforce login on specific routes: call login(), use enforceLogin(), or wrap pages with withLoginEnforced().
Explicitly check whether the user is logged in or not.

But if your app has no public pages, all of this can be simplified. Auto Login lets you assume the user is always logged in, and that every page implicitly requires authentication.

Here the oidc object will always be of type Oidc.UserLoggedIn, there is no need to check if( oidc.isUserLoggedIn ) anywhere.

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,
     useOidc,
     getOidc,
     oidcFnMiddleware,
     oidcRequestMiddleware,
-     enforceLogin
 } = 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 { useOidc } from "@/oidc";

export const Route = createRootRoute({
    // ...
    shellComponent: ShellComponent,
    // NOTE: Even with SSR disabled here, the ShellComponent is still SSR'd.
    // Only page components lose SSR.  
    // You *can* disable SSR per-page for routes that load authed data,
    // but if your app isn’t public, it’s simpler to SSR only the shell.  
    ssr: false
});

function ShellComponent({ children }: { children: React.ReactNode }) {

    const { isOidcReady } = useOidc();
    
    return (
        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body>
                <div className="min-h-screen flex flex-col">
                    <Header />
                    <main className="flex flex-1 flex-col">
                        {isOidcReady &&
                            children
                        }
                    </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 { useOidc } from "@/oidc";

-function AuthButtons() {
-    const { hasInitCompleted, isUserLoggedIn } = useOidc();
-
-    if (!hasInitCompleted) {
-        return null;
-    }
-
-    return isUserLoggedIn ? <LoggedInAuthButton /> : <NotLoggedInAuthButton />;
-}
-
-function LoggedInAuthButton() {
-    const { logout } = useOidc({ assert: "user logged in" });
-
-    return (
-        <button
-            onClick={() => logout({ redirectTo: "home" })}
-        >
-            Logout
-        </button>
-    );
-}
-
-function NotLoggedInAuthButton() {
-    const { login, issuerUri } = useOidc({ assert: "user not logged in" });
-
-    return (
-        <div className="flex items-center gap-2">
-            <button
-                onClick={() => login()}
-            >
-                Login
-            </button>
-        </div>
-    );
-}

+function AuthButtons() {
+
+    const { isOidcReady, logout } = useOidc();
+
+    if (!isOidcReady) {
+        return null;
+    }
+
+    return (
+        <button
+            onClick={() => logout({ redirectTo: "home" })}
+        >
+            Logout
+        </button>
+    );
+}

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

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

-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
 });

For all the components that are within the <OidcInitializationGate /> you know that hasInitCompleted will be true so you can assert it to narrow down the type:

-const { ... } = useOidc({ assert: "user logged in" });
+const { ... } = useOidc({ assert: "ready" });

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 1 day ago

Was this helpful?