To start, ensure you have installed the following packages: "next": "14.2.5" and "next-auth": "^5.0.0-beta.20".

Part one: Follow the instructions at https://authjs.dev/getting-started/authentication/oauth to create the necessary files.

Here is my folder structure:

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

// src/auth.ts

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

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

import { handlers } from "@/auth"
export const { GET, POST } = handlers

// src/middleware.ts

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

Part two: You’ll also need to include some environment variables.

AUTH_SECRET=
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=
AUTH_URL=https://english92.com:3000/api/auth

To set up AUTH_SECRET, generate it using npm exec auth secret.

Next, go to Google OAuth at https://console.cloud.google.com/apis/credentials, create an OAuth 2.0 application, and set the Authorized redirect URIs to https://english92.com:3000/api/auth/callback/google (adjust this URI as needed for your case). Then, paste the Client ID and Client Secret into your Next.js project’s environment variables.

After deploying to your VPS server, you can run the project since the URL is tied to a specific domain supported by the server. Execute npm run dev in the server terminal. You should be able to access the Google sign-in page at https://english92.com:3000/api/auth/signin and log in using Google.

Note: Ensure your site uses HTTPS, as Google will not accept HTTP. For details on enabling HTTPS, refer to my previous article.