Next.js + NextAuth.js — Introduction to Frontend SSO
Next.js + NextAuth.js — Introduction to Frontend SSO
After setting up SSO on the backend with Spring Boot and Keycloak, the next step is to handle authentication on the frontend. In modern React/Next.js apps, NextAuth.js is the go-to solution for integrating SSO with OAuth2/OpenID Connect providers.
What is NextAuth.js?
NextAuth.js is a complete authentication solution for Next.js apps:
- Supports OAuth2, OpenID Connect, SAML (via providers)
- Session management for React and Next.js pages
- JWT support for APIs
- Role-based access control via callbacks
It allows you to authenticate users against your IdP (e.g., Keycloak) and manage their sessions easily.
Step 1: Install NextAuth.js
In your Next.js project:
npm install next-auth
Then create a folder for API routes: pages/api/auth/[...nextauth].js
NextAuth.js uses this as a dynamic route to handle all authentication requests.
Step 2: Configure a provider (Keycloak example)
Create [...nextauth].js with your Keycloak settings:
import NextAuth from "next-auth";
import KeycloakProvider from "next-auth/providers/keycloak";
export default NextAuth({
providers: [
KeycloakProvider({
clientId: process.env.KEYCLOAK_CLIENT_ID,
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
issuer: process.env.KEYCLOAK_ISSUER
})
],
session: {
strategy: "jwt"
},
callbacks: {
async jwt({ token, account }) {
if (account) {
token.accessToken = account.access_token;
}
return token;
},
async session({ session, token }) {
session.accessToken = token.accessToken;
return session;
}
}
});
> Key points:
- issuer — your Keycloak realm URL
- session strategy = jwt — keeps session on client side for API calls
- Callbacks allow you to inject access tokens and roles
Step 3: Protecting pages
Use getServerSideProps or useSession hook:
import { getSession, useSession } from "next-auth/react";
export default function Dashboard() {
const { data: session } = useSession();
if (!session) return <p>Access denied</p>;
return <div>Welcome, {session.user.name}!</div>;
}
// Or on server side
export async function getServerSideProps(context) {
const session = await getSession(context);
if (!session) {
return {
redirect: {
destination: "/api/auth/signin",
permanent: false
}
};
}
return { props: { session } };
}
This ensures that only authenticated users can access protected pages.
Step 4: Accessing APIs with JWT
Frontend apps often need to call your Spring Boot APIs with the SSO token:
const res = await fetch("/api/protected", {
headers: {
Authorization: `Bearer ${session.accessToken}`
}
});
> The backend (Spring Boot + Keycloak) can then validate the JWT for authentication and authorization.
Step 5: Next steps
In the next post, we will integrate **Keycloak + NextAuth.js**, showing the full login flow, token management, and protecting API routes.
Part of the Next.js Frontend SSO Series
❤️ Support This Blog
If this post helped you, you can support my writing with a small donation. Thank you for reading.
Comments
Post a Comment