Toothy•4w ago

Discord oauth with Convex Auth and invalid redirect uri.

Hi! I've been trying to setup discord oauth with convex and it's giving me so much issues! Here's my auth.ts

import Discord from "@auth/core/providers/discord";
import { convexAuth } from "@convex-dev/auth/server";

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [
    Discord({
      clientId: process.env.DISCORD_AUTH_CLIENT_ID,
      clientSecret: process.env.DISCORD_AUTH_CLIENT_SECRET,
      authorization: { params: { scope: "identify" } },
    }),
  ],
});

import Discord from "@auth/core/providers/discord";
import { convexAuth } from "@convex-dev/auth/server";

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [
    Discord({
      clientId: process.env.DISCORD_AUTH_CLIENT_ID,
      clientSecret: process.env.DISCORD_AUTH_CLIENT_SECRET,
      authorization: { params: { scope: "identify" } },
    }),
  ],
});

Here's the sign in button:

import { useAuthActions } from "@convex-dev/auth/react";
import { Button } from "../ui/button";

export const DiscordSignIn = () => {
  const { signIn } = useAuthActions();
  const handleSignIn = async () => {
    try {
      await signIn("discord");
    } catch (error) {
      console.error("Sign-in error:", error);
    }
  };
  return <Button onClick={handleSignIn}>Sign in with Discord</Button>;
};

import { useAuthActions } from "@convex-dev/auth/react";
import { Button } from "../ui/button";

export const DiscordSignIn = () => {
  const { signIn } = useAuthActions();
  const handleSignIn = async () => {
    try {
      await signIn("discord");
    } catch (error) {
      console.error("Sign-in error:", error);
    }
  };
  return <Button onClick={handleSignIn}>Sign in with Discord</Button>;
};

And here's my middleware (with next-intl):

import { convexAuthNextjsMiddleware } from "@convex-dev/auth/nextjs/server";
import type { NextFetchEvent, NextRequest } from "next/server";
import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";

const intlMiddleware = createMiddleware(routing);
const convexAuthMiddleware = convexAuthNextjsMiddleware();

export async function middleware(request: NextRequest, event: NextFetchEvent) {
  const { pathname } = request.nextUrl;
  const isApiRoute =
    pathname.startsWith("/api") || pathname.startsWith("/trpc");
  const isNextInternal = pathname.startsWith("/_next");
  const isStaticFile = pathname.includes(".");

  if (isApiRoute || isNextInternal || isStaticFile) {
    if (isApiRoute) {
      return convexAuthMiddleware(request, event);
    }
    return;
  }

  const intlResponse = await intlMiddleware(request);

  if (intlResponse) {
    return intlResponse;
  }

  return convexAuthMiddleware(request, event);
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico).*)",
  ],
};

import { convexAuthNextjsMiddleware } from "@convex-dev/auth/nextjs/server";
import type { NextFetchEvent, NextRequest } from "next/server";
import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";

const intlMiddleware = createMiddleware(routing);
const convexAuthMiddleware = convexAuthNextjsMiddleware();

export async function middleware(request: NextRequest, event: NextFetchEvent) {
  const { pathname } = request.nextUrl;
  const isApiRoute =
    pathname.startsWith("/api") || pathname.startsWith("/trpc");
  const isNextInternal = pathname.startsWith("/_next");
  const isStaticFile = pathname.includes(".");

  if (isApiRoute || isNextInternal || isStaticFile) {
    if (isApiRoute) {
      return convexAuthMiddleware(request, event);
    }
    return;
  }

  const intlResponse = await intlMiddleware(request);

  if (intlResponse) {
    return intlResponse;
  }

  return convexAuthMiddleware(request, event);
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico).*)",
  ],
};

NEXT_PUBLIC_CONVEX_URL=http://127.0.0.1:3210 so this is default. I've been trying to set up callback url within discord dev portal to variations of http://localhost:3210/auth/callback/discord, I tried localhost, tried 127.0.0.1, tried 3210 and 3000 ports and it always gives me wrong oauth2 redirect_uri error. I am out of ideas and I was hoping I can get some help here.

2 Replies

Convex Bot•4w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•3w ago

The callback url is based on your Convex Site URL (ends in .site), for self hosted that defaults to port 3211. Port 3210 is your Convex URL (aka your Convex Cloud URL, ends in .cloud). https://labs.convex.dev/auth/config/oauth#callback-url

OAuth - Convex Auth

Authentication library for your Convex backend

Discord oauth with Convex Auth and invalid redirect uri.

Did you find this page helpful?