auth-rush v0.0.5008

Installation

The one and only solution you will need for authentication for Nextjs Apps.

Create Project

Start by creating a new Next.js project using create-next-app:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Run the CLI

Run the auth-rush init command to setup your project:

npx auth-rush@latest init

Configure rush.json

You will be asked a few questions to configure rush.json:

Please choose an authentication provider:
❯ Credentials
  Google
  GitHub


Configuration for credentials:
❯ Do you want to add two-factor authentication? (yes/no)
❯ Choose a mailing service: nodemailer / resend
❯ Add username field? (yes/no)

Configuration for magic link:
❯ Choose a mailing service: nodemailer / resend

Env Variables

Depending on your selection a template .env file will be created with .

Note: Do not change the names of any of the environment variables that are generated. If you do change them, make sure to update them wherever they are being used as well.

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=


GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

NODEMAILER_EMAIL=
NODEMAILER_EMAIL_PASSWORD=

NEXT_PUBLIC_BASE_URL=
AUTH_SECRET=

DATABASE_URL=
# uncomment next line if you use Prisma <5.10
 DATABASE_URL_UNPOOLED=

App Structure

Here's how I structure my Next.js apps. You can use this as a reference:

.
├── app
│   ├── layout.tsx
│   └── page.tsx
│   ├── (auth)
│   │   ├── login.tsx
│   │   ├── register.tsx
│   │   └── ...
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── auth
│   │   ├── LoginForm.tsx
│   │   ├── RegisterForm.tsx
│   │   └── ...
│   ├── user
│   │   ├── Profile.tsx
│   │   ├── Settings.tsx
│   └── ...
├── actions
│   ├── auth.actions.ts
│   └── user.actions.ts
├── lib
│   ├── mail.ts
│   ├── utils.ts
│   ├── database.ts
├── styles
│   └── globals.css
├── auth.ts
├── auth.config.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

• UI components are placed in the components/ui folder.
• Other components such as <PageHeader /> and <MainNav />are placed in the components folder.
• Utility functions are stored in the lib folder, with utils.ts defining the cn helper.
• Authentication-related components are located in the components/auth folder.
• Actions related to authentication and user are stored in the actions folder.
• The auth.ts file contains authentication configuration.
• auth.config.ts holds authentication configuration settings

That's it

Congratulations! You have successfully set up authentication in your Next.js app. To display the logged-in user, simply add the <UserMenu /> component. Now you can focus on building your application with confidence.

import UserMenu from "@/components/user/UserMenu";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <UserMenu />
    </main>
  );
}