Skip to content

Next.JS Quickstart

Welcome to the Next.js Quickstart guide! In this document, you will learn to build a Next.js app, add user login and display user profile information using WSO2 Identity Server.

[//] STEPS_START

Configure an Application in WSO2 Identity Server

  • Sign into WSO2 Identity Server console and navigate to Applications > New Application.
  • Select Traditional Web Application and complete the wizard popup by providing a suitable name and an authorized redirect URL.(Ensure that the protocol remains set to OpenID Connect (OIDC).)

Example

name: nextjs-react

Authorized redirect URL: http://localhost:3000/api/auth/callback/asgardeo

Note down the following values from the Protocol and Info tabs of the registered application. You will need them to configure Asgardeo React SDK.

  • client-id from the Protocol tab.
  • client-secret from the Protocol tab.
  • issuer from the Info tab.

Info

The authorized redirect URL determines where WSO2 Identity Server should send users after they successfully log in. Typically, this will be the web address where your app is hosted. For this guide, we'll use http://localhost:3000/api/auth/callback/asgardeo, as the authorized redirect URL .

Create a Next.js app

Create your new Next.js app.

npx create-next-app@latest --typescript is-nextjs

cd is-nextjs

npm install

npm run dev

yarn create next-app --typescript is-nextjs

cd is-nextjs

yarn install

yarn dev

pnpm create next-app --typescript is-nextjs

cd is-nextjs

pnpm install

pnpm run dev

Install Auth.js library

Auth.js is a lightweight JavaScript library designed for simplifying authentication workflows in web application. The Asgardeo provider for Auth.js offers all the components and hooks you need to integrate your app with WSO2 Identity Server.To get started, simply add Auth.js library to the project. Make sure to stop the dev server started in the previous step.

npm install next-auth@beta

yarn add next-auth@beta

pnpm add next-auth@beta

Next, generate AUTH_SECRET environment variable. 

npx auth secret

yarn dlx auth secret

pnpm dlx auth secret

Add following entries to the .env or .env.local file, and make sure to replace the placeholders in the following code with the client-id, client-secret and issuer values you copied in Step-1 during the application registration in the WSO2 Identity Server console.

.env.local
    AUTH_ASGARDEO_ID="<your-app-client-id>"
    AUTH_ASGARDEO_SECRET="<your-app-client-secret>"
    AUTH_ASGARDEO_ISSUER="<your-app-issuer-url>"

Create the auth.js configuration File

Create a file called /src/auth.ts'. 

touch /src/auth.ts

Add WSO2 Identity Server as a provider in the /src/auth.ts' file.

auth.ts
import NextAuth from "next-auth"
import Asgardeo from "next-auth/providers/asgardeo"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Asgardeo({
    issuer: process.env.AUTH_ASGARDEO_ISSUER
  })],
})

Create a Route Handler file in the src/app/api/auth/[...nextauth]/route.ts location. 

mkdir -p src/app/api/auth/\[...nextauth\]

touch mkdir -p src/app/api/auth/\[...nextauth\]/route.ts

Note

The directory src/app/api/auth/[...nextauth]/route.ts in a Next.js project is used to define a dynamic API route for handling authentication. The [...nextauth] is a catch-all route that processes multiple authentication-related requests such as sign-in, sign-out, and session management. The route.ts file specifies the logic for these operations, typically by exporting handlers for HTTP methods like GET and POST. This setup centralizes authentication logic, supports OAuth providers like Google or GitHub, and integrates seamlessly into Next.js applications for secure and scalable authentication workflows.

Update the src/app/api/auth/[...nextauth]/route.ts file with the following code.

route.ts
import { handlers } from "@/auth" 
export const { GET, POST } = handlers

Next, create src/middleware.ts file with the following code. 

touch mkdir -p src/middleware.ts
middleware.ts
export { auth as middleware } from "@/auth"

Replace the existing content of the page.tsx file with following content to add login and logout features from Auth.JS.

page.tsx
import { auth, signIn, signOut } from "@/auth"

export default async function Home() {
  const session = await auth();

  return (
    <div className="justify-items-center">
      {
        !session ? (
          <form
            action={async () => {
              "use server"
              await signIn("asgardeo")
            }}
          >
            <button type="submit">Sign in</button>
          </form>
        ) : (
          <>
            <p> You are now signed in!</p>

            <form
              action={async () => {
                "use server"
                await signOut()
              }}
            >
              <button type="submit">Sign Out</button>
            </form>
          </>
        )
      }
    </div>
  );
}

Visit your app's homepage at http://localhost:3000.

Important

You need to create a test user in WSO2 Identity Server by following this guide to tryout login and logout features.

Display logged in user details

Modified the code as below to see logged in user details.

auth.ts
import NextAuth from "next-auth"
import Asgardeo from "next-auth/providers/asgardeo"

declare module "next-auth" {
  interface User {
    username?: string;
  }
}

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Asgardeo({
    issuer: process.env.AUTH_ASGARDEO_ISSUER
  })],
  callbacks: {
    async jwt({ token, profile }) {
      if (profile) {
        token.username = profile.username;
      }

      return token;
    },
    async session({ session, token }) {            
      if (token) {
        session.user.username = token.username as string;
      }

      return session;
    }
  }
})

Then, update page.tsx with the following highlighted line to display the username of logged in user.

page.tsx
...
<>
  <p> You are now signed in!</p>
  <p> hello {session.user?.username}</p>
  <form
    action={async () => {
      "use server"
      await signOut()
    }}
  >
    <button type="submit">Sign Out</button>
  </form>
</>
...

[//] STEPS_END