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 fusion.json

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

Please choose an authentication provider:
❯ Credentials
  Google
  GitHub
 
 
❯ Do you want to add two-factor authentication? (yes/no)
❯ Choose a mailing service: nodemailer / resend
❯ Add username field? (yes/no)
 

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=
DATABASE_URL_UNPOOLED=
 

Update next.config

Add the following to your next.config file:

Note: you get some by default images you using Credentials that's why you need to add uuid to your next.config file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "utfs.io",
      },
      {
        protocol: "https",
        hostname: "google.com",
      },
      {
        protocol: "https",
        hostname: "github.com",
      },
    ],
  },
};
 
export default nextConfig;

App structure

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

• 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>
  );
}