/next-auth-example-sign-in-page

Example Auth.js v5 Custom Signin Page

Primary LanguageTypeScriptMIT LicenseMIT

🔐 Example Sign-in Page

This is a custom Auth.js v5 sign-in page I'd once used in a side project. I decided to clean it up and open-source it in this template repository as others might find it a useful starting point! This example was created with create-next-app and uses next@14.3.0-canary.21 and uses next-auth@5.0.0-beta.16.

Note

The default password for this demo page is password

📺 Screenshot

Screenshot 1

🚀 Getting Started

  1. Install dependencies
pnpm install
  1. Create your own environment variables
cp .env.local.example .env.local
  • AUTH_SECRET (required) - openssl rand -base64 33 or use a generator like npx auth secret
  • AUTH_GITHUB_* (optional) - navigate to GitHub > Settings > Apps and create a new app.
    • For a more detailed walk-through, check out the Auth.js guide
  1. Start dev server
pnpm dev
  1. Open http://localhost:3000 and click "Signin" in the top-left or navigate to the signin page directly (/auth/login).

🔐 Auth.js

You will find the example sign-in page under /app/auth/login/page.tsx.

This page has both the Credential provider and an example OAuth provider (Github) setup. More information can be found at https://authjs.dev

📝 License

MIT