NextAuth basePath works locally but not on Vercel #11133

KentonParton · 2024-06-11T12:53:09Z

KentonParton
Jun 11, 2024

Hi all, I am running into a uri_mismatch error on Vercel but it works perfectly locally while using basePath. Locally, the callback URL is correctly included as https://my-vercel-domain/api/repo-auth/callback/github but when running on Vercel, the callback URL is https://my-vercel-domain/api/auth/callback/github. Some help would be much appreciated!

This is how the project is setup using App Router, next 14.2.3, next-auth 4.24.7:

layout.js

import {AuthProvider} from "@propelauth/nextjs/client";
import "./globals.css";
import NextAuthProvider from "@/components/next-auth-provider";
import ClientProvider from "@/components/client-provider";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <AuthProvider authUrl={process.env.NEXT_PUBLIC_AUTH_URL} redirectUri={process.env.PROPELAUTH_REDIRECT_URI}>
        <NextAuthProvider>
          <body className={inter.className}>
            <ClientProvider>
              {children}
            </ClientProvider>
          </body>
        </NextAuthProvider>
      </AuthProvider>
    </html>
  );
}

next-auth-provider.jsx

'use client';

import { SessionProvider } from 'next-auth/react';

export default function NextAuthProvider({ children }) {
  return (
    <SessionProvider basePath="/api/repo-auth">
      {children}
    </SessionProvider>
  );
}

repo-login-providers.jsx

import { useEffect, useState } from "react";
import { getProviders, signIn } from "next-auth/react";
import { Button } from "@/components/ui/button";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
import * as React from "react"; // Use useSearchParams for App Router

const providerIcons = {
  github: <GitHubLogoIcon className="h-5 w-5" />,
};

export default function GitHubSignIn() {
  const [providers, setProviders] = useState({});
  const callbackUrl = 'https://my-vercel-domain/api/repo-auth/callback/github';

  useEffect(() => {
    (async () => {
      try {
        const res = await getProviders();
        setProviders(res || {});
      } catch (error) {
        console.error('Error fetching providers:', error);
        setProviders({});
      }
    })();
  }, []);

  return (
    <div className="flex flex-col w-full">
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <Button
            onClick={() => {
              signIn(provider.id, { callbackUrl });
            }}
            className="flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-4 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
          >
            {providerIcons[provider.id]}
            <span className="text-md font-semibold leading-6">
              {provider.name}
            </span>
          </Button>
        </div>
      ))}
    </div>
  );
}

I created the following dir:

src
  app
    api
      repo-auth
        [...nextauth]
          route.ts

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

const authOptions = {
  debug: true,
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      // Persist the GitHub user ID and access token to the token
      if (account) {
        token.githubId = account.providerAccountId;
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token }) {
      // Add the GitHub user ID and access token to the session
      session.user.githubId = token.githubId;
      session.user.accessToken = token.accessToken;
      return session;
    },
  },
  basePath: "/api/repo-auth" // I don't think this does anything in my version of next-auth but I have tried with and without it.
};


const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

Environment Variables
NEXTAUTH_URL=https://my-vercel-domain/api/repo-auth

GitHub OAuth Callback URL
https://my-vercel-domain/api/repo-auth/callback/github

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

NextAuth basePath works locally but not on Vercel #11133

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

NextAuth basePath works locally but not on Vercel #11133

Uh oh!

Uh oh!

KentonParton Jun 11, 2024

Replies: 0 comments

KentonParton
Jun 11, 2024