Passer au contenu principal

Next.js

The nextjs-auth repo demonstrates Casdoor integration in Next.js. Steps below.

Étape 1 : Déployer Casdoor

Deploy Casdoor in production mode. Confirm the login page works (e.g. at http://localhost:8000 with admin / 123 in dev).

Step 2: Add middleware

Put middleware.ts (or .js) at the project root (same level as pages or app, or inside src). Middleware runs before the request completes and can redirect or modify the response.

Example:

const protectedRoutes = ["/profile"];

export default function middleware(req) {
if (protectedRoutes.includes(req.nextUrl.pathname)) {
return NextResponse.redirect(new URL("/login", req.url));
}
}

See Next.js middleware.

Étape 3 : Utiliser le SDK Casdoor

Install

npm install casdoor-js-sdk
# or: yarn add casdoor-js-sdk

Initialize

Provide these six string parameters:

ParameterRequisDescription
serverUrlOuiCasdoor server URL (e.g. http://localhost:8000).
clientIdOuiApplication client ID.
clientSecretOuiApplication client secret.
organizationNameYesOrganization name.
appNameYesApplication name.
redirectPathYesCallback path (e.g. /callback).

Example:

const sdkConfig = {
serverUrl: "https://door.casdoor.com",
clientId: "294b09fbc17f95daf2fe",
clientSecret: "dd8982f7046ccba1bbd7851d5c1ece4e52bf039d",
organizationName: "casbin",
appName: "app-vue-python-example",
redirectPath: "/callback",
};
prudence

Replace with your own Casdoor instance: serverUrl, clientId, and clientSecret.

Add the callback URL (e.g. http://localhost:8080/callback) in the application’s Redirect URLs.

Redirect to sign-in and handle callback

const CasdoorSDK = new Sdk(sdkConfig);
CasdoorSDK.signin_redirect();

After sign-in, Casdoor redirects back with a code. Exchange for a token and optionally store the user in a cookie:

CasdoorSDK.exchangeForAccessToken()
.then((res) => {
if (res && res.access_token) {
return CasdoorSDK.getUserInfo(res.access_token);
}
})
.then((res) => {
Cookies.set("casdoorUser", JSON.stringify(res));
});

See How to use Casdoor SDK.

Step 4: Protect routes in middleware

In middleware, treat the presence of the Casdoor user cookie as authenticated and redirect unauthenticated users away from protected routes:

const protectedRoutes = ["/profile"];
const casdoorUserCookie = req.cookies.get("casdoorUser");
const isAuthenticated = !!casdoorUserCookie;

if (!isAuthenticated && protectedRoutes.includes(req.nextUrl.pathname)) {
return NextResponse.redirect(new URL("/login", req.url));
}