Back
Help with OAuth Redirect Issue on Deployed Next.js App with Appwrite
Hey Appwrite community! 👋
I'm running into an issue with OAuth authentication in my Next.js app deployed on Vercel. In development, everything works fine for both GitHub and Google OAuth, but when deployed, I’m getting an error: AppwriteException: Invalid redirect
My Setup:
App Framework: Next.js, deployed on Vercel.
Authentication: Using Appwrite’s OAuth for GitHub and Google login.
Redirect URIs in Appwrite:
Success: https://my-app-name.vercel.app/oauth
Failure: https://my-app-name.vercel.app/sign-up
Environment Variable: NEXT_PUBLIC_APP_URL set to the Vercel deployment URL (https://astro-colab.vercel.app/sign-in).
Code Snippet for OAuth in Next.js:
TypeScript
import { createAdminClient } from "@/lib/appwrite";
import { redirect } from "next/navigation";
import { OAuthProvider } from "node-appwrite";
export async function signUpWithGithub() {
const { account } = await createAdminClient();
const redirectUrl = await account.createOAuth2Token(
OAuthProvider.Github,
`${process.env.NEXT_PUBLIC_APP_URL}/oauth`,
`${process.env.NEXT_PUBLIC_APP_URL}/sign-up`
);
return redirect(redirectUrl);
}
export async function signUpWithGoogle() {
const { account } = await createAdminClient();
const redirectUrl = await account.createOAuth2Token(
OAuthProvider.Google,
`${process.env.NEXT_PUBLIC_APP_URL}/oauth`,
`${process.env.NEXT_PUBLIC_APP_URL}/sign-up`
);
return redirect(redirectUrl);
}
TL;DR
Developers experiencing OAuth redirect issue in deployed Next.js app on Vercel with Appwrite. Works in development but not deployed, showing `AppwriteException: Invalid redirect`. Code snippet shared for OAuth in Next.js provided. Solution: Ensure redirect URIs match deployment settings; update OAuth redirect URLs in Appwrite to reflect Vercel deployment URL.