How to implement Next Auth Shared SSO auth/session/cookies for cross-domains in localhost?

[student262512]

Hi All,

  I'm tyring to integrate a group of websites where I've to implement Shared SSO auth/session/cookies for cross-domains using Next-auth V4. This is the code & config in my localhost. 

Setup:
OS: Windows
Reverse Proxy: nginx
SSL: mkcert (local SSL)

Domains:
https://auth.example.com - central auth server (Next js, Next Auth)

https://api.example.com - central api server (Next js, Next Auth)

https://example.com - public facing server (Next js, Next Auth)

https://pay.example.com - public facing payment server (Next js, Next Auth)

https://example-times.com - Existing PHP website with user specific blogs/articles & other info

https://example.shop - Existing PHP website for shopping (Must be integrated with https://pay.example.com)

For all the Next Auth based websites, I've setup the below code and config

env:
NEXTAUTH_URL=https://auth.example.com/api/auth

next.config.mjs:

const nextConfig = {
    eslint: {
      ignoreDuringBuilds: true,
    },
    crossOrigin: 'use-credentials',
    typescript: {
      ignoreBuildErrors: true,
    },
    output: "standalone",
    reactStrictMode: false,
    swcMinify: true,
    images: {
      remotePatterns: [
        {
          protocol: "https",
          hostname: process.env.NEXT_PUBLIC_EXAMPLE_API_HOST,
          pathname: "/files/images/**",
        },
      ],
    },
    async headers() {
      const refererUrl = process.env.AUTH_URL;
      return [
        {
          source: "/api/:path*",
          has: [
            {
              type: "header",
              key: "Origin",
              value: "(?<origin>.+)",
            },
          ],
          headers: [
            {
              key: "Referer",
              value: refererUrl,
            },
          ],
        },
      ];
    },
  };
  
  export default nextConfig;

Session Provider in all Nextjs websites:

<SessionProvider
            session={session}
            baseUrl={NEXTAUTH_URL}
            basePath={NEXTAUTH_URL}
            refetchInterval={5 * 60}
          >
            <NextAuthProvider>{children} </NextAuthProvider>
          </SessionProvider>

NextAuthOptions in src/app/api/auth/[...nextauth]/route.ts:

import CredentialsProvider from "next-auth/providers/credentials";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    CredentialsProvider({
      name: "Login",
      credentials: {
        email: {
          label: "Email:",
          type: "email",
          placeholder: "Email",
        },
        password: {
          label: "Password:",
          type: "password",
          placeholder: "Password",
        },
      },
      async authorize(credentials) {
        // authentication code
      }
    }),
  ],
  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60,
    updateAge: 24 * 60 * 60,
    fetchOptions: {
      credentials: "include",
    },
  },
  jwt: {
    secret: process.env.NEXTAUTH_SECRET,
  },
  cors: {
    origin: process.env.EXAMPLE_CORS_WHITELIST.split(",").map((origin) =>
      origin.trim()
    ),
    credentials: true,
  },
  secret: process.env.NEXTAUTH_SECRET, 
  cookies: {
    sessionToken: {
      name:
        process.env.NODE_ENV === "production"
          ? "__Secure-next-auth.session-token"
          : "next-auth.session-token",
      options: {
        httpOnly: true,
        sameSite: "none",
        path: "/",
        secure: true,
      },
    },
    csrfToken: {
      name: "next-auth.csrf-token",
      options: {
        httpOnly: true,
        sameSite: "none", 
        path: "/",
        secure: true,
      },
    },
    pkceCodeVerifier: {
      name:
        process.env.NODE_ENV === "production"
          ? "__Secure-next-auth.pkce.code_verifier"
          : "next-auth.pkce.code_verifier",
      options: {
        httpOnly: true,
        sameSite: "none",
        path: "/",
        maxAge: 900,
        secure: true,
      },
    },
    state: {
      name:
        process.env.NODE_ENV === "production"
          ? "__Secure-next-auth.state"
          : "next-auth.state",
      options: {
        httpOnly: true,
        sameSite: "none",
        path: "/",
        maxAge: 900,
        secure: true,
      },
    },
    nonce: {
      name:
        process.env.NODE_ENV === "production"
          ? "__Secure-next-auth.nonce"
          : "next-auth.nonce",
      options: {
        httpOnly: true,
        sameSite: "none",
        path: "/",
        secure: true,
      },
    },
  },
  callbacks: {
    async jwt({ token, user, profile }) {
      if (profile) token.user = profile;
      else if (user) token.user = user;
      return token; 
    },
    async session({ session, token, profile }) {
      if (profile) session.user = profile;
      else if (token?.user) session.user = token.user;
      return session; 
    },
    async redirect({ url, baseUrl }) {
      if (corsDomains.some((domain) => url.startsWith(domain))) {
        return url;
      }
      return baseUrl;
    },
  },
};

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  return await NextAuth(req, res, authOptions);
};

export { handler as GET, handler as POST, handler as PUT, handler as DELETE, handler as OPTIONS };

Code in src/middleware.js:

import { NextResponse } from "next/server";

const allowedOrigins = process.env.EXAMPLE_CORS_WHITELIST.split(",").map(
  (domain) => domain.trim()
);

export function middleware(request) {
  const origin = request.headers.get("origin") ?? "";
  const response = NextResponse.next();

  if (allowedOrigins.includes(origin)) {
    response.headers.set("Access-Control-Allow-Origin", origin);
    response.headers.set("Access-Control-Allow-Credentials", "true");
    response.headers.set(
      "Access-Control-Allow-Methods",
      "GET, OPTIONS, PATCH, DELETE, POST, PUT"
    );
    response.headers.set(
      "Access-Control-Allow-Headers",
      "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
    );
    if (request.method === "OPTIONS") {
      return new Response(null, {
        status: 200,
        headers: response.headers,
      });
    }
    return response;
  } else {
    return NextResponse.rewrite(new URL("/unauthorized", request.url));
  }
}

export const config = {
  matcher: "/api/:path*",
};

Scenario: When I visit the url "https://example.com" in my local machine, I'd like to auto signin the user as 'Guest', but I keep getting the error "OPTIONS /api/auth/providers 400" in server console log and the error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://auth.example.com/api/auth/providers. (Reason: CORS request did not succeed). Status code: (null)."

Can anyone help me resolve this issue?