https://github.com/ndom91/next-auth-example-sign-in-page
Example Auth.js v5 Custom Signin Page
https://github.com/ndom91/next-auth-example-sign-in-page
authjs next-auth nextjs tailwindcss
Last synced: 5 months ago
JSON representation
Example Auth.js v5 Custom Signin Page
- Host: GitHub
- URL: https://github.com/ndom91/next-auth-example-sign-in-page
- Owner: ndom91
- License: mit
- Created: 2022-04-09T13:40:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-26T13:59:31.000Z (over 1 year ago)
- Last Synced: 2025-04-11T14:57:45.189Z (9 months ago)
- Topics: authjs, next-auth, nextjs, tailwindcss
- Language: TypeScript
- Homepage: https://authjs-custom-page-example.vercel.app
- Size: 1.37 MB
- Stars: 95
- Watchers: 2
- Forks: 34
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🔐 Example Sign-in Page
This is a custom [Auth.js v5](https://authjs.dev) 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
## 🚀 Getting Started
1. Install dependencies
```bash
pnpm install
```
2. Create your own environment variables
```bash
cp .env.local.example .env.local
```
- `AUTH_SECRET` (**required**) - `openssl rand -base64 33` or use [a generator](https://generate-secret.vercel.app/33) like `npx auth secret`
- `AUTH_GITHUB_*` (**optional**) - navigate to [GitHub > Settings > Apps](https://github.com/settings/apps) and create a new app.
- For a more detailed walk-through, check out the Auth.js [guide](https://authjs.dev/guides/configuring-github)
3. Start dev server
```bash
pnpm dev
```
4. Open [http://localhost:3000](http://localhost:3000) and click "Signin" in the top-left or navigate to the signin page directly ([`/auth/login`](http://localhost:3000/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](https://authjs.dev/getting-started/providers/credentials) and an example OAuth provider ([`Github`](https://authjs.dev/getting-started/providers/github)) setup. More information can be found at https://authjs.dev
## 📝 License
MIT