Redirection after Apple login

[LoickNosal]

Hello,

I have a NextJS application using NextAuth and I am facing a problem. I have configured my two providers Google and Apple and I have my login page /signin. After login, I want to redirect the user to the /home page. It works fine with Google however I am redirected to the root after a successful login with Apple '/'.

On the Google configuration site https://console.cloud.google.com/apis/ I have in Authorized JavaScript Origins my domain and my domain/api/auth/callback/google in Authorized redirect URIs. In the Apple configuration on https://developer.apple.com/ for my Service ID I have in Website Url my domain in domains and subdomains and my domain/api/auth/callback/apple in Redirect URLs.

Voici mon fichier next-auth.ts :

import routes from '@/config/routes';
import { MongoDBAdapter } from '@auth/mongodb-adapter';
import jwt from 'jsonwebtoken';
import type { NextAuthOptions } from 'next-auth';
import NextAuth from 'next-auth';
import AppleProvider from 'next-auth/providers/apple';
import GoogleProvider from 'next-auth/providers/google';
import { generateAppleSecret } from './generateAppleSecret';
import connectMongo from './mongo';

interface NextAuthOptionsExtended extends NextAuthOptions {
  adapter: any;
}

export const authOptions: NextAuthOptionsExtended = {
  secret: process.env.NEXTAUTH_SECRET,
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      async profile(profile) {
        const currentDate = new Date();
        const freeTrialEndDate = new Date();
        freeTrialEndDate.setDate(
          currentDate.getDate() + configFile.freeTrialDays
        );
        const userLanguage = 'fr';
        return {
          id: profile.sub,
          name: profile.given_name ? profile.given_name : profile.name,
          email: profile.email,
          image: profile.picture,
          createdAt: currentDate.toISOString(),
          updatedAt: currentDate.toISOString(),
          freeTrialEndDate: freeTrialEndDate.toISOString(),
          hasAccess: false,
          hasOnboarded: false,
          language: userLanguage,
        };
      },
    }),
    AppleProvider({
      clientId: process.env.APPLE_CLIENT_ID!,
      clientSecret: generateAppleSecret(), // Génération dynamique du JWT Apple
      async profile(profile) {
        const currentDate = new Date();
        const freeTrialEndDate = new Date();
        freeTrialEndDate.setDate(
          currentDate.getDate() + configFile.freeTrialDays
        );
        const userLanguage = 'fr';

        return {
          id: profile.sub,
          name: profile.name ? profile.name : 'Utilisateur Apple',
          email:
            profile.email ||
            `hidden-email-${profile.sub}@privaterelay.appleid.com`, // Gestion des emails cachés par Apple
          image: null, // Apple ne fournit pas d’image de profil
          createdAt: currentDate.toISOString(),
          updatedAt: currentDate.toISOString(),
          freeTrialEndDate: freeTrialEndDate.toISOString(),
          hasAccess: false,
          hasOnboarded: false,
          language: userLanguage,
        };
      },
    }),
  ],
  cookies: {
    pkceCodeVerifier: {
      name: 'next-auth.pkce.code_verifier',
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
      },
    },
  },

  ...(connectMongo && { adapter: MongoDBAdapter(connectMongo) }),

  callbacks: {
    async redirect({ url, baseUrl }) {
      return `${baseUrl}${routes.home}`;
    },
    async jwt({ token, user }) {
      if (user) {
        token.userId = user.id;
        token.language = user.language;
      }
      const internalToken = jwt.sign(
        { sub: token.userId },
        process.env.NEXTAUTH_SECRET!
      );
      token.apiToken = internalToken;
      return token;
    },
    async session({ session, token }) {
      if (session.user) {
        session.user.id = token.userId as string;
        (session.user as any).language = token.language as string;
      }
      session.apiToken = token.apiToken as string;
      return session;
    },
  },
  session: {
    strategy: 'jwt',
  },
  pages: {
    signIn: '/signin',
    signOut: '/signout',
  },
};

export default NextAuth(authOptions);

j'ai dans mon fichier routes.ts :

  root: '/',
  home: '/home',
  signIn: '/signin',
};

export default routes;

Voici ma page de login :

import Logo from '@/components/Logo';
import routes from '@/config/routes';
import { getProviders, signIn, useSession } from 'next-auth/react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function SignInPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [providers, setProviders] = useState<any>(null);

  useEffect(() => {
    if (status === 'authenticated') {
      router.replace(routes.home);
    }
  }, [status, router]);

  useEffect(() => {
    getProviders().then((res) => {
      setProviders(res);
    });
  }, []);


  return (
    <div>
      {Object.values(providers).map((provider: any) => (
        <div key={provider.name} className="mb-4">
          <button
            onClick={() => signIn(provider.id)}
          >
            <div>
              <Image
                src={`/images/icons/providers/${provider.id}.svg`}
                alt={provider.name}
                width={30}
                height={30}
              />
              <span>Continue with {provider.name}</span>
            </div>
          </button>
        </div>
      ))}
    </div>
  );
}

Environment 🖥
"next-auth": "^4.24.7",
"next": "^14.2.20",

In any case the connection works well with Apple and Google, it's just a redirection problem in the case of Apple.

[JakeServin]

Were you able to resolve this? Running into the same issue

[likaci]

Check this #2124 (comment)