NextJS 系列之 Auth

NextJS中实现auth有很多手段，你可以不借助三方工具，自定义的搭建Auth模块，不过对于一个需要敏捷开发迭代的同时保证质量安全的Web应用，借助于三方公开的auth提供者才更加的适合：比较推荐的是:

NextAuth.js:

Auth.js | Installation

Authentication for the Web

https://authjs.dev/getting-started/installation?framework=Next.js

1.Installing auth.js:


pnpm add next-auth@beta

2.Create Environment Variable：


npx auth secret

This will create environment variable for auth in your .env file:

3.Create auth.ts:

Create your auth.ts file, In this file, you can control the behaviour of the library and specify custom authentication logic, adapters, etc. the library will pass in all the options to the framework specific initalization function and then export the route handlers, signin and signout methods, and more


import NextAuth from "next-auth"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

./auth.ts

Next, Add a Route Handler under /app/api/auth/[...nextauth]/route.ts


import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

./app/api/auth/[...nextauth]/route.ts

Optinal:

Besides, you can add optional Middleware to keep the session alive, this will update the session expiry every time its called.


export { auth as middleware } from "@/auth"

./middleware.ts

All right Now you had finished set up, If you want use third providers like google, github, apple, follow the next step:

3.Google:

Config your google auth callback URL on Google Cloud:

console.cloud.google.com

https://console.cloud.google.com/auth/clients/


[origin]/api/auth/callback/google

Once registered, you should receive a Client ID and Client Secret. Add those in your application environment file:


AUTH_GOOGLE_ID={CLIENT_ID}
AUTH_GOOGLE_SECRET={CLIENT_SECRET}

.env.local

Setup provider:



import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Google],
})

./auth.ts

Use it:



import { signIn } from "@/auth"
 
export default function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("google")
      }}
    >
      <button type="submit">Signin with Google</button>
    </form>
  )
}

./components/sign-in.tsx

Click the “Sign in with Google" button and if all went well, you should be redirected to Google and once authenticated, redirected back to the app!

4.Credentials:

If you do not want to use, you can use Credentials:


import NextAuth from "next-auth"
import Credentials from "next-auth/providers/credentials"
// Your own logic for dealing with plaintext password strings; be careful!
import { saltAndHashPassword } from "@/utils/password"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      // You can specify which fields should be submitted, by adding keys to the `credentials` object.
      // e.g. domain, username, password, 2FA token, etc.
      credentials: {
        email: {},
        password: {},
      },
      authorize: async (credentials) => {
        let user = null
 
        // logic to salt and hash password
        const pwHash = saltAndHashPassword(credentials.password)
 
        // logic to verify if the user exists
        user = await getUserFromDb(credentials.email, pwHash)
 
        if (!user) {
          // No user found, so this is their first attempt to login
          // Optionally, this is also the place you could do a user registration
          throw new Error("Invalid credentials.")
        }
 
        // return user object with their profile data
        return user
      },
    }),
  ],
})

./auth.ts

Create Signin Form:


import { signIn } from "@/auth"
 
export function SignIn() {
  return (
    <form
      action={async (formData) => {
        "use server"
        await signIn("credentials", formData)
      }}
    >
      <label>
        Email
        <input name="email" type="email" />
      </label>
      <label>
        Password
        <input name="password" type="password" />
      </label>
      <button>Sign In</button>
    </form>
  )
}

./components/sign-in.tsx

But, Always validate the credentials server-side, i.e. by leveraging a schema validation library like Zod.


pnpm add zod


import { object, string } from "zod"
 
export const signInSchema = object({
  email: string({ required_error: "Email is required" })
    .min(1, "Email is required")
    .email("Invalid email"),
  password: string({ required_error: "Password is required" })
    .min(1, "Password is required")
    .min(8, "Password must be more than 8 characters")
    .max(32, "Password must be less than 32 characters"),
})

./lib/zod.ts


import NextAuth from "next-auth"
import { ZodError } from "zod"
import Credentials from "next-auth/providers/credentials"
import { signInSchema } from "./lib/zod"
// Your own logic for dealing with plaintext password strings; be careful!
import { saltAndHashPassword } from "@/utils/password"
import { getUserFromDb } from "@/utils/db"
 
export const { handlers, auth } = NextAuth({
  providers: [
    Credentials({
      // You can specify which fields should be submitted, by adding keys to the `credentials` object.
      // e.g. domain, username, password, 2FA token, etc.
      credentials: {
        email: {},
        password: {},
      },
      authorize: async (credentials) => {
        try {
          let user = null
 
          const { email, password } = await signInSchema.parseAsync(credentials)
 
          // logic to salt and hash password
          const pwHash = saltAndHashPassword(password)
 
          // logic to verify if the user exists
          user = await getUserFromDb(email, pwHash)
 
          if (!user) {
            throw new Error("Invalid credentials.")
          }
 
          // return JSON object with the user data
          return user
        } catch (error) {
          if (error instanceof ZodError) {
            // Return `null` to indicate that the credentials are invalid
            return null
          }
        }
      },
    }),
  ],
})

./auth.ts

NextJS 系列 之 Auth

NextAuth.js:

1.Installing auth.js:

2.Create Environment Variable：

3.Create auth.ts:

3.Google:

4.Credentials:

NextJS 系列之 Auth