Search code examples
reactjsnext.jssupabase

Pass additional data when using supabase oauth


I am trying to create an application with two forms that would assign a role to a user on signup. A user can choose whether they are a user or an organisation. I am using nextjs and supabase for the backend. My app supports both oauth and signup using email and password. I would like to pass the user's role as a string within the data object and this works well for the signup using mail and password by doing so:

await supabase.auth.signUp({
      email: values.email,
      password: values.password,
      options: {
        data: {
          full_name: values.username,
          role: "user",
        },
      },
    });

How can i achieve such a scenario when using google signin so that i can modify a new oauth user and assign them a custom role upon signup. I tried adding a data object to the options but this seems wrong for oauth. My current oauth implementation is:

await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        queryParams: {
          access_type: "offline",
          prompt: "consent",
        },
        redirectTo: OAUTH_REDIRECT_URL,
      },
    });

and this is my auth/callback route implementation

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const requestUrl = new URL(req.url);
  const { searchParams } = requestUrl;
  const code = searchParams.get("code");

  if (code) {
    const supabase = createRouteHandlerClient({ cookies });
    await supabase.auth.exchangeCodeForSession(code);
  }

  return NextResponse.redirect(`${requestUrl.origin}/dashboard`);
}

Solution

  • When you perform OAuth sign-in with Supabase, the metadata stored in your auth.users table gets populated with the metadata obtained from the auth provider, such as the user's full name or username etc, and there is currently no way to add your own metadata. In case of performing OAuth sign up, you would have to store the role information somewhere else, and once OAuth sign up is complete, save the information on the database.