Skip to content

A simple authentication nextjs project developed with CodeWithAntonio.

License

Notifications You must be signed in to change notification settings

PedroJorge148/auth-next

Repository files navigation

Next - A simple but complete authentication service

Next - A simple authentication service

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits Netlify Status GitHub issues GitHub pull requests

πŸ“” Table of Contents

πŸ“ Folder Structure

Here is the folder structure of this app.
auth-next
β”œβ”€β”€ components.json
β”œβ”€β”€ LICENSE
β”œβ”€β”€ next.config.mjs
β”œβ”€β”€ next-env.d.ts
β”œβ”€β”€ package.json
β”œβ”€β”€ pnpm-lock.yaml
β”œβ”€β”€ postcss.config.mjs
β”œβ”€β”€ prisma
β”‚Β Β  └── schema.prisma
β”œβ”€β”€ public
β”œβ”€β”€ README.md
β”œβ”€β”€ src
β”‚Β Β  β”œβ”€β”€ actions
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ admin.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ login.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ logout.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ new-password.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ new-verification.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ register.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ reset.ts
β”‚Β Β  β”‚Β Β  └── settings.ts
β”‚Β Β  β”œβ”€β”€ app
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ api
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ admin
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”‚Β Β  └── route.ts
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── auth
β”‚Β Β  β”‚Β Β  β”‚Β Β      └── [...nextauth]
β”‚Β Β  β”‚Β Β  β”‚Β Β          └── route.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ auth
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ error
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”‚Β Β  └── page.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ layout.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ login
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”‚Β Β  └── page.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ new-password
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”‚Β Β  └── page.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ new-verification
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”‚Β Β  └── page.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ register
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”‚Β Β  └── page.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── reset
β”‚Β Β  β”‚Β Β  β”‚Β Β      └── page.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ favicon.ico
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ globals.css
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ layout.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ page.tsx
β”‚Β Β  β”‚Β Β  └── (protected)
β”‚Β Β  β”‚Β Β      β”œβ”€β”€ admin
β”‚Β Β  β”‚Β Β      β”‚Β Β  └── page.tsx
β”‚Β Β  β”‚Β Β      β”œβ”€β”€ client
β”‚Β Β  β”‚Β Β      β”‚Β Β  └── page.tsx
β”‚Β Β  β”‚Β Β      β”œβ”€β”€ layout.tsx
β”‚Β Β  β”‚Β Β      β”œβ”€β”€ server
β”‚Β Β  β”‚Β Β      β”‚Β Β  └── page.tsx
β”‚Β Β  β”‚Β Β      └── settings
β”‚Β Β  β”‚Β Β          β”œβ”€β”€ navbar.tsx
β”‚Β Β  β”‚Β Β          └── page.tsx
β”‚Β Β  β”œβ”€β”€ auth.config.ts
β”‚Β Β  β”œβ”€β”€ auth.ts
β”‚Β Β  β”œβ”€β”€ components
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ auth
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ back-button.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ card-wrapper.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ error-card.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ header.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ login-button.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ login-form.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ logout-button.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ new-password-form.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ new-verificaiton-form.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ register-form.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ reset-form.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ role-gate.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ social.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── user-button.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ form-error.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ form-success.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ ui
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ avatar.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ badge.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ button.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ card.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ dialog.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ dropdown-menu.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ form.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ input.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ label.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ select.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ sonner.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── switch.tsx
β”‚Β Β  β”‚Β Β  └── user-info.tsx
β”‚Β Β  β”œβ”€β”€ data
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ account.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ password-reset-token.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ tokens.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ two-factor-confirmation.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ two-factor-token.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ user.ts
β”‚Β Β  β”‚Β Β  └── verification-token.ts
β”‚Β Β  β”œβ”€β”€ hooks
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ use-current-role.ts
β”‚Β Β  β”‚Β Β  └── use-current-user.ts
β”‚Β Β  β”œβ”€β”€ lib
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ auth.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ mail.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ prisma.ts
β”‚Β Β  β”‚Β Β  └── utils.ts
β”‚Β Β  β”œβ”€β”€ middleware.ts
β”‚Β Β  β”œβ”€β”€ next-auth.d.ts
β”‚Β Β  β”œβ”€β”€ routes.ts
β”‚Β Β  └── schemas
β”‚Β Β      └── index.ts
β”œβ”€β”€ tailwind.config.ts
└── tsconfig.json

🧰 Getting Started

  1. Make sure Git and NodeJS is installed.
  2. Clone this repository to your local computer.
  3. Create .env file in root directory.
  4. Contents of .env:
# .env

# neon postgresql db
DATABASE_URL="postgresql://<username>:<password>@<host>:<port>/auth-next?sslmode=require&pgbouncer=true"

# random auth secret (https://generate-secret.vercel.app/32)
AUTH_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxx"

# next auth base url
NEXT_PUBLIC_APP_URL=http://localhost:3000

# github auth keys
GITHUB_CLIENT_ID=xxxxxxxxxxxxxx
GITHUB_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# google auth keys
GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# resend api key
RESEND_API_KEY=re_XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  1. Set up a Neon PostgreSQL Database

  2. Obtain PostgreSQL Database URL:

  • If you don't have a Neon PostgreSQL database, create one.
  • Obtain the database URL, which typically looks like postgresql://<username>:<password>@<host>:<port>/<database-name>.
  1. Update .env with Database Configuration:

    • Open your .env file.

    • Update the following variables with your Neon PostgreSQL database information:

      # .env
      
      # Neon PostgreSQL db
      DATABASE_URL="postgresql://<your-neondb-username>:<your-neondb-password>@<your-neondb-host>:<your-neondb-port>/auth-next?sslmode=require&pgbouncer=true"
  2. Generate Authentication Secret

  3. Generate Random Authentication Secret:

  4. Update .env with Authentication Secret:

    • Open your .env file.

    • Update the AUTH_SECRET variable with the generated secret:

      # .env
      
      # Random auth secret
      AUTH_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxx"
  5. Configure NextAuth Base URL

  6. Set NextAuth Base URL:

    • Open your .env file.

    • Set the NEXT_PUBLIC_APP_URL variable to the base URL of your Next.js application:

      # .env
      
      # NextAuth base URL
      NEXT_PUBLIC_APP_URL=http://localhost:3000
  7. Obtain GitHub Authentication Keys

  8. Register Application on GitHub:

  9. Update .env with GitHub Keys:

    • Open your .env file.

    • Update the following variables with the obtained GitHub keys:

      # .env
      
      # GitHub auth keys
      GITHUB_CLIENT_ID=xxxxxxxxxxxxxx
      GITHUB_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  10. Obtain Google Authentication Keys

  11. Register Application on Google Cloud Console:

    • Go to the Google Cloud Console and create a new project.
    • Enable the "Google+ API" for your project and create credentials to obtain the client ID and client secret.
  12. Update .env with Google Keys:

    • Open your .env file.

    • Update the following variables with the obtained Google keys:

      # .env
      
      # Google auth keys
      GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
      GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  13. Set Up Resend API Key

  14. Obtain Resend API Key and Email:

    • Obtain an API key and email from Resend for onboarding purposes.
  15. Update .env with Resend API Key and Email:

    • Open your .env file.

    • Update the following variables with the obtained Resend API key and email:

      # .env
      
      # Resend API key and email
      RESEND_API_KEY=re_XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  16. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

  17. Now app is fully configured πŸ‘ and you can start using this app using npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
❗ WARN: Resend will only works with the email registered.

πŸ“· Screenshots:

Modern UI/UX

Server Components

Client Components

βš™οΈ Tech Stack

React JS Next JS Typescript Tailwind CSS Vercel Prisma

πŸ”§ Stats

Stats for Next

πŸ™Œ Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

πŸš€ Follow Me

GitHub followers Linkedin Badge Instagram Badge

πŸ“š Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

πŸ“ƒ Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

Star History Chart

(back to top)

```