A collection of production-ready code snippets
Create a new Next.js application with TypeScript and Tailwind CSS
npx create-next-app@latest my-app --use-npmComplete NextAuth.js configuration with multiple OAuth providers
import NextAuth, { type NextAuthOptions } from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';
import FacebookProvider from 'next-auth/providers/facebook';
import type { JWT } from 'next-auth/jwt';
import type { Session } from 'next-auth';
export const authOptions: NextAuthOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
GitHubProvider({
clientId: process.env.GITHUB_ID!,
clientSecret: process.env.GITHUB_SECRET!,
}),
FacebookProvider({
clientId: process.env.FACEBOOK_CLIENT_ID!,
clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
}),
],
callbacks: {
async jwt({ token, user, account }): Promise<JWT> {
if (user) {
token.id = (user as any).id;
}
if (account?.access_token) {
token.accessToken = account.access_token;
}
return token;
},
async session({ session, token }): Promise<Session> {
if (session.user) {
(session.user as any).id = token.id;
}
(session as any).accessToken = token.accessToken;
return session;
}
},
pages: {
signIn: '/auth/signin',
signUp: '/auth/signup',
},
secret: process.env.NEXTAUTH_SECRET!,
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };Required environment variables for NextAuth.js configuration
# NextAuth.js
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here
# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# GitHub OAuth
GITHUB_ID=your-github-id
GITHUB_SECRET=your-github-secret
# Facebook OAuth
FACEBOOK_CLIENT_ID=your-facebook-app-id
FACEBOOK_CLIENT_SECRET=your-facebook-app-secretSyntax highlighting powered by Prism.js with the "prism-tomorrow" theme