casdoor / nextjs-auth

Next.js Authentication based on Casdoor, live demo: https://nextjs-auth.casdoor.org

nextjs-auth

A Next.js example for Casdoor SSO.

Live demo: https://nextjs-auth.casdoor.org

Demo video

Configuration

The default config.js points to the Casdoor demo site. Change it to your own Casdoor:

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

export default sdkConfig;

Getting started

run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

nextjs-auth's Issues

Add docs page about how to integrate Casdoor into existing Next.js project

Add a new docs page to:

How to work with next-intl?

Hi guys, I have a question about the demo project.
In the middleware.ts.

const protectedRoutes = ["/profile"];

export default function middleware(req) {
  const casdoorUserCookie = req.cookies.get("casdoorUser");
  const isAuthenticated = casdoorUserCookie ? true : false;

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

variable req.nextUrl.pathname may have some locale prefix if your import next-intl/ package in your project to support multi-language. So the proteced path can't be matched in this situation. How to resolve it?

Make a Next.js authentication middleware/example based on Casdoor

This can be a middleware/plugin or an example (if middleware not required)

References

1. Next.js docs:

• https://nextjs.org/docs/pages/building-your-application/routing/authenticating
• https://nextjs.org/learn/dashboard-app/adding-authentication

2. Other SSO solutions

• https://refine.dev/blog/nextauth-google-github-authentication-nextjs/
• https://developer.okta.com/blog/2020/11/13/nextjs-typescript
• https://github.com/jplew/next-keycloak

Client secret is exposed

Doesn't referencing the client secret here exposes it to the front end code ?

nextjs-auth/app/callback/page.js

Line 29 in 1078119

client_secret: sdkConfig.clientSecret,