Skip to main content
Slik Dev configures authentication for you at scaffold time using NextAuth/Auth.js — the standard auth library for Next.js applications. You don’t write any auth routes, session handlers, or provider configurations from scratch. By the time npm run dev starts, your app already has working sign-in and sign-up screens, session management, and the wiring for OAuth and magic link flows. Your job is only to supply the credentials for whichever providers you want to activate.

​
What’s Included

Slik Dev’s auth setup covers three distinct capabilities out of the box:

OAuth / Social Login

Social sign-in with providers like Google, GitHub, and others. OAuth flows are pre-wired — you only need to add your client ID and secret to .env.

Magic Links

Passwordless email authentication. Users receive a one-time sign-in link delivered to their inbox. No password storage required.

Session Management

Secure, JWT-based session handling via NextAuth. Sessions are validated server-side on every protected route. No manual middleware required.

​
Generated Auth Screens

Slik Dev generates two complete auth screens, both styled with your chosen theme and pre-connected to the NextAuth handler:
  • Sign In — An email/password form with OAuth provider buttons and a magic link option. Located at /auth/signin (or /sign-in depending on your App Router config).
  • Sign Up — An account creation screen with the same provider options.
You can preview these screens interactively at the Slik Dev theme previewer by selecting the Auth tab.

​
Environment Variables

After scaffolding, open the .env file in your project root. You’ll see placeholder variables already written out for you:
Never commit your .env file to version control. The generated project includes a .gitignore that excludes it, but verify this before your first push.
NEXTAUTH_SECRET must be a random string of at least 32 characters. Generate one with: openssl rand -base64 32

​
Configuring OAuth Providers After Scaffolding

1

Create an OAuth application with your provider

For Google: go to Google Cloud Console → APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client ID.Set the Authorized redirect URI to:
For production, add your live domain:
2

Copy your client ID and secret

After creating the OAuth app, copy the Client ID and Client Secret from your provider’s dashboard.
3

Add credentials to your .env file

Open .env in your project root and fill in the values:
4

Verify the provider is registered in your auth config

Slik generates a NextAuth configuration file at app/api/auth/[...nextauth]/route.ts. Open it and confirm your provider is listed:
To add more providers, import them from next-auth/providers and add them to the providers array.
5

Restart the dev server and test sign-in

Navigate to http://localhost:3000 and use the sign-in screen. The OAuth button for your configured provider should redirect to the provider’s consent screen.

​
Protecting Routes

NextAuth session checks work with Next.js middleware. Your generated project includes a middleware.ts file at the project root that protects the /dashboard and /admin routes by default:
Add any additional route patterns to matcher to extend protection to other pages.
You can access the session object in any Server Component using getServerSession(authOptions) from next-auth. In Client Components, use the useSession() hook from next-auth/react.