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 the WSO2 Identity Server Console and navigate to Applications > New Application.
- Select Next.js and complete the wizard by providing a suitable name and an authorized redirect URL.
Example
Name: is-nextjs
Authorized redirect URL: http://localhost:3000
Once you finish creating the application, note down the following values from its Guide tab. You will need them to configure Asgardeo Next.js SDK.
- Client ID - The unique identifier for your application.
- Client Secret - The secret key generated for your application.
- Base URL - The base URL of your WSO2 Identity Server organization. This typically follows the format
https://localhost:9443
Info
The authorized redirect URL specifies where WSO2 Identity Server should send users after they successfully log in. This is usually the web address where your application is running. For this guide, we'll use http://localhost:3000, as the sample app will be accessible at this URL.
Create a Next.js app¶
Create your new Next.js app.
npm create next-app@latest is-nextjs -- --yes
cd is-nextjs
npm run dev
yarn create next-app@latest is-nextjs -- --yes
cd is-nextjs
yarn dev
pnpm create next-app@latest is-nextjs -- --yes
cd is-nextjs
pnpm dev
Install @asgardeo/nextjs¶
Asgardeo Next.js SDK provides all the components and hooks you need to integrate WSO2 Identity Server 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.
NEXT_PUBLIC_ASGARDEO_BASE_URL="https://api.asgardeo.io/t/<your-org-name>"
NEXT_PUBLIC_ASGARDEO_CLIENT_ID="<your-app-client-id>"
ASGARDEO_CLIENT_SECRET="<your-app-client-secret>"
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.
import {asgardeoMiddleware} from '@asgardeo/nextjs/server';
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.
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>
);
}
Add sign-in and sign-out to your app¶
Asgardeo SDK provides SignInButton, SignOutButton components to handle user sign-in and sign-out. You can use these components along side SignedIn and SignedOut components to conditionally render content based on the user's logged in state.
Replace the existing content of the app/page.tsx file with following content.
import {SignInButton, SignedIn, SignOutButton, SignedOut} from '@asgardeo/nextjs';
export default function Home() {
return (
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<SignOutButton />
</SignedIn>
</header>
);
}
Display signed-in user's profile information¶
The SDK provides several ways to access the signed-in user's profile information. You can use the User, UserProfile, or UserDropdown components to access and display user profile information in a declarative way.
User: TheUsercomponent provides a render prop pattern to access user profile information:UserProfile: TheUserProfilecomponent provides a declarative way to display and update user profile information.UserDropdown: TheUserDropdowncomponent provides a dropdown menu with built-in user information and sign-out functionality.
'use client'
import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserDropdown, UserProfile } from '@asgardeo/nextjs';
export default function Home() {
return (
<>
<header>
<SignedIn>
<UserDropdown />
<SignOutButton />
</SignedIn>
<SignedOut>
<SignInButton />
</SignedOut>
</header>
<main>
<SignedIn>
<User>
{(user) => (
<div>
<p>Welcome back, {user.userName || user.username || user.sub}</p>
</div>
)}
</User>
<UserProfile />
</SignedIn>
</main>
</>
);
}
Choose how users will sign in¶
Before running the app, you need to decide how you want users to sign into your application:
Enable App-Native Authentication [//] SHOW_IF="data-quickstart=embedded"¶
The embedded sign-in functionality depends on the App-Native Authentication feature. This feature allows your app to authenticate users without redirecting them to the WSO2 Identity Server sign-in page.
To enable this feature, follow these steps:
- Navigate to WSO2 Identity Server Console
- Go to Applications > Your App > Advanced
- Enable App-Native Authentication by checking the checkbox.
Info
Read more about App-Native Authentication to understand how it works.
Set up the in-app sign-in form [//] SHOW_IF="data-quickstart=embedded"¶
First, create an app route for the sign-in page. Create a new file called app/sign-in/page.tsx and add the following code:
'use client'
import { SignIn } from '@asgardeo/nextjs';
export default function SignInPage() {
return <SignIn />;
}
Then, update the .env file with the route for the sign-in page. Add the following line to your .env file:
NEXT_PUBLIC_ASGARDEO_SIGN_IN_URL="/sign-in"
Run the app [//] SHOW_IF="data-quickstart=redirect,data-quickstart=embedded"¶
To run the app, use the following command:
npm run dev
yarn dev
pnpm dev
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 sign-in and sign-out features.
[//] STEPS_END