Skip to content

Configure the application for login
4 min

Install @asgardeo/nextjs

Asgardeo Next.js SDK provides all the components and hooks you need to integrate Asgardeo into your app. To get started, simply add the Asgardeo Next.js SDK to the project. Make sure to stop the dev server started in the previous step.

npm install @asgardeo/nextjs

yarn add @asgardeo/nextjs

pnpm add @asgardeo/nextjs

Set up environment variables

Create a .env or an appropriate environment configuration file in the root of your Next.js project. This file will store all the configuration values required for the Asgardeo Next.js SDK to function properly.

.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>"
NEXT_PUBLIC_ASGARDEO_SCOPES="<scopes copied from your application API Authorization>"

Warning

There is a Secret used for signing JWT session cookies. If this is not defined, it will use the default one configured in the Asgardeo SDK. However it is mandatory to change this in a production environment.

Please generate a random key with the following.

openssl rand -base64 32
Add it to the .env file as below.

ASGARDEO_SECRET="<your-secret-key-for-jwt-signing>"

Setup the middleware

Create a file called middleware.ts in the root of your Next.js project and integrate the asgardeoMiddleware from the Asgardeo Next.js SDK.

The asgardeoMiddleware helper integrates Asgardeo authentication into your Next.js application and supports both the App and Pages routers.

middleware.ts
import {asgardeoMiddleware} from '@asgardeo/nextjs';

export default asgardeoMiddleware();

export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
};

Add <AsgardeoProvider /> to your app

The <AsgardeoProvider /> serves as a context provider for the SDK. You can integrate this provider to your app by wrapping the root component.

Add the following changes to the app/layout.tsx file in your Next.js project.

app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import {AsgardeoProvider} from '@asgardeo/nextjs';
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>
  );
}