`<AsgardeoProvider />`

The AsgardeoProvider is the root context provider component that configures the @asgardeo/nextjs and provides authentication context to your entire Next.js application. It must wrap your application to enable authentication features.

Overview¶

The AsgardeoProvider initializes the Asgardeo authentication client, manages authentication state, and provides context to child components through React Context. It handles token management, user sessions, organization switching, and branding preferences automatically.

Usage¶

The AsgardeoProvider must be used at the root of your Next.js application to ensure that all components have access to authentication features.

Basic Usage¶

A minimal setup involves wrapping your root component with the AsgardeoProvider and providing the necessary clientId, clientSecret, and baseUrl.

app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import {AsgardeoProvider} from '@asgardeo/nextjs/server';
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <AsgardeoProvider>{children}</AsgardeoProvider>
      </body>
    </html>
  );
}

.env

NEXT_PUBLIC_ASGARDEO_BASE_URL="https://api.asgardeo.io/t/<your-organization-name>"
NEXT_PUBLIC_ASGARDEO_CLIENT_ID="<your-app-client-id>"
ASGARDEO_CLIENT_SECRET="<your-app-client-secret>"
# Secret used for signing JWT session cookies (change this in production!)
ASGARDEO_SECRET='<your-super-secret-key-for-jwt-signing-change-this-in-production>'

Note

It is possible to pass the clientId, clientSecret, and baseUrl as props to the AsgardeoProvider component, but it is recommended to use environment variables for better security and flexibility.

Advanced Usage¶

For more advanced configurations, you can provide additional props such as:

scopes: Specifies the OpenID Connect scopes to request during sign-in.
afterSignInUrl: URL to redirect to after successful sign-in.
afterSignOutUrl: URL to redirect to after sign-out.
preferences: Customization options for UI behavior, theming, and internationalization (i18n).
etc.

For a complete list of props, refer to the Props section below.

app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import {AsgardeoProvider} from '@asgardeo/nextjs/server';
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <AsgardeoProvider

          preferences={{
            theme: {
              inheritFromBranding: false,
              mode: 'dark',
              overrides: {
                colors: {
                  primary: '#ff0000',
                },
              },
            },
            i18n: {
              language: 'fr-FR',
              fallbackLanguage: 'en-US',
              bundles: {
                'fr-FR': {
                  'signin.title': 'Connexion',
                  'user.profile.title': 'Profil utilisateur',
                  'user.profile.update.generic.error': "Une erreur s'est produite lors de la mise à jour du profil. Veuillez réessayer.",
                },
                'es-ES': {
                  'signin.title': 'Iniciar sesión',
                  'user.profile.title': 'Perfil de usuario',
                  'user.profile.update.generic.error': 'Ocurrió un error al actualizar el perfil. Por favor, inténtalo de nuevo.',
                },
              },
            },
          }}
        >
          {children}
        </AsgardeoProvider>
      </body>
    </html>
  );
}

bash title=".env" highlight="5-8" NEXT_PUBLIC_ASGARDEO_BASE_URL="https://api.asgardeo.io/t/<your-organization-name>" NEXT_PUBLIC_ASGARDEO_CLIENT_ID="<your-app-client-id>" ASGARDEO_CLIENT_SECRET="<your-app-client-secret>" ASGARDEO_SECRET='<your-super-secret-key-for-jwt-signing-change-this-in-production>' NEXT_PUBLIC_ASGARDEO_AFTER_SIGN_IN_URL='http://localhost:3000/dashboard' NEXT_PUBLIC_ASGARDEO_SIGN_IN_URL='/signin' NEXT_PUBLIC_ASGARDEO_SIGN_UP_URL='/signup' NEXT_PUBLIC_ASGARDEO_SCOPES='internal_organization_create internal_organization_view internal_organization_update internal_organization_delete'

Props¶

The AsgardeoProvider component accepts the following props:

Prop	Type	Required	Description	Environment Variable
`clientId`	`string`	✅	Client ID of your application	`NEXT_PUBLIC_ASGARDEO_CLIENT_ID`
`baseUrl`	`string`	✅	The base URL of the Asgardeo tenant (e.g., `https://api.asgardeo.io/t/abc-org`)	`NEXT_PUBLIC_ASGARDEO_BASE_URL`
`clientSecret`	`string`	✅	Client secret of your application	`ASGARDEO_CLIENT_SECRET`
`scopes`	`string \| string[]`	❌	OpenID Connect Scopes to request during the sign-in. Defaults to `'openid profile internal_login'` if not provided.	`NEXT_PUBLIC_ASGARDEO_SCOPES`
`storage`	`sessionStorage \| localStorage \| webWorker`	❌	Storage mechanism to use for session management. Defaults to `sessionStorage` if not provided.
`afterSignInUrl`	`string`	❌	URL to redirect to after sign-in process is completed.	`NEXT_PUBLIC_ASGARDEO_AFTER_SIGN_IN_URL`
`afterSignUpUrl`	`string`	❌	URL to redirect to after sign-up process is completed.	`NEXT_PUBLIC_ASGARDEO_SIGN_UP_URL`
`afterSignOutUrl`	`string`	❌	URL to redirect to after sign-out process is completed.	`NEXT_PUBLIC_ASGARDEO_AFTER_SIGN_OUT_URL`
`tokenValidation`	`TokenValidation`	❌	Configuration for token validation.
`preferences`	`Preferences`	❌	Customization options for UI behavior, internationalization (i18n) and styling.

TokenValidation

The tokenValidation prop allows you to configure how ID tokens are validated.

Property	Type	Default	Description
`idToken`	`IdTokenValidation`	`{}`	Configuration for ID token validation

IdTokenValidation

Property	Type	Default	Description
`validate`	`boolean`	`true`	Whether to validate the ID token
`validateIssuer`	`boolean`	`true`	Whether to validate the issuer
`clockTolerance`	`number`	`300`	Allowed clock skew in seconds

Preferences

The preferences prop allows you to customize the UI components provided by the SDK.

Theme Preferences (preferences.theme)

Property	Type	Default	Description
`inheritFromBranding`	`boolean`	`true`	Whether to inherit theme from Asgardeo organization/application branding
`mode`	`light \| dark \| system`	`'system'`	Theme mode. `'system'` follows user's OS preference
`overrides`	`ThemeConfig`	`{}`	Custom theme overrides for colors, typography, spacing, etc.

Internationalization Preferences (preferences.i18n)

Property	Type	Default	Description
`language`	`string`	Browser default	Language code for UI text (e.g., `'en-US'`, `'es-ES'`)
`fallbackLanguage`	`string`	`'en-US'`	Fallback language when translations aren't available
`bundles`	`object`	`{}`	Custom translation bundles to override default text