Google Auth Popup?

[dovenokan]

is there a way to make it with popup instead of redirecting?

[imolorhe]

It would be great if supabase could have this option. It's a convenient option to use in firebase and auth0 (those I know of). Would love that option here as well.

[kangmingtay]

@MildTomato seems like a good idea for the auth component in supabase-ui?

[bangdragon]

I like this feature too

[mliakos]

Redirecting causes lost state which is unacceptable in some senarios (i.e. when you have authentication as a last step in a user's flow and he needs to return to where he was in the app).

[riodw]

Any news on this being added?

[volkandkaya]

Was needing this today and had to give up on Google integration for now.

Ideally there would be a popup and some way of leveraging Gotrue/Supabase while still having flexibility.

[bangdragon]

Also supabase does not implement the new google Identity sigin. The old sigin in method will end soon. Why

[riodw]

@supabase-automated-user Please add this, it makes is SO MUCH easier for Customers.

[kien-ngo]

This is much needed!

[hf]

Hey everyone, I think there is a way to get this, though I don't believe we've tested it as such.

You can set skipBrowserRedirect to true and get the callback URL. You can then open that URL in a popup window or tab. Given that multi-tab notifications are supported from a few versions ago, the user sign-in from the popup should just work.

https://supabase.github.io/gotrue-js/v2/modules.html#SignInWithOAuthCredentials

I'll try to find some time to test this properly and document it. Let me know how it goes!

[OlegGulevskyy]

This does work indeed, but you need to handle the oauth results yourself (close the popup when user signed in)

[rizkianakbar]

waiting for that!

[MonsieurLazar]

does anyone have an example implementation?

[j4w8n]

@MonsieurLazar would be something like this.

const { data, error } = await supabase.auth.signInWithOAuth({
  provider,
  options: {
    skipBrowserRedirect: true
  }
})

/* whatever your method of redirecting in a popup is */
redirectInPopup(data.url)

[PatrykKuniczak]

@j4w8n This poup is created by you?

[j4w8n]

@PatrykKuniczak yeah, you'd need to create the popup.

[PatrykKuniczak]

@j4w8n
Did you use React in this case?

I use this <Auth/> component, and it don't have that option, i must create this like you, and create all component by myself?

And

Can u share me the poup code?

And that's legit for google rights, i can use it on production, the chrome extension pass the validation on google store?

[j4w8n]

@PatrykKuniczak I use sveltekit, but I've never implemented the popup - I just know others have asked if it was possible.

[likendev]

Any chance the team would look into this and include the pop-up features? Would appreciate the effort.

[RyannGalea]

Has this been officially implemented yet?

[d5br5]

Hi everyone.

I implemented auth popup.

My dev environment is : Next.js 14.1 + supabase latest

---

point is,

• Implement an additional callback page to handle the completion result of the Google login.
• Set the callback page as the redirect URL to navigate to upon completion of the login.
• Utilize the BroadcastChannel web API to transfer data between popups and close the popups.

---

Here is my code.

First, google login start page

"use client";

import { Button } from "@/src/components/ui/button";
import { useToast } from "@/src/components/ui/use-toast";
import { createClient } from "@/src/utils/supabase/client";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

const GoogleSignIn = () => {
  const [popup, setPopup] = useState<Window | null>(null);
  const { toast } = useToast();
  const router = useRouter();

  useEffect(() => {
    // If there is no popup, nothing to do
    if (!popup) return;

    // Listen for messages from the popup by creating a BroadcastChannel
    const channel = new BroadcastChannel("popup-channel");
    channel.addEventListener("message", getDataFromPopup);

    // effect cleaner (when component unmount)
    return () => {
      channel.removeEventListener("message", getDataFromPopup);
      setPopup(null);
    };
  }, [popup]);

  const login = async () => {
    const supabase = createClient();
    const origin = location.origin;
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `${origin}/auth/popup-callback`,
        queryParams: { prompt: "select_account" },
        skipBrowserRedirect: true,
      },
    });
    if (error || !data) {
      return toast({
        title: "Login Failed",
        description: "Failed to login with Google. Please try again.",
        variant: "destructive",
      });
    }

    const popup = openPopup(data.url);
    setPopup(popup);
  };

  const openPopup = (url: string) => {
    const width = 500;
    const height = 600;
    const left = window.screen.width / 2 - width / 2;
    const top = window.screen.height / 2 - height / 2;

    // window features for popup
    const windowFeatures = `scrollbars=no, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`;
    const popup = window.open(url, "popup", windowFeatures);
    return popup;
  };

  const getDataFromPopup = (e: any) => {
    // check origin
    if (e.origin !== window.location.origin) return;

    // get authResultCode from popup
    const code = e.data?.authResultCode;
    if (!code) return;

    // clear popup and replace the route
    setPopup(null);
    router.replace(`/api/~~/?code=${code}`);
  };

  return (
    <Button onClick={login} variant="outline">
      Google Login {popup ? "processing..." : ""}
    </Button>
  );
};

export default GoogleSignIn;

Second, google login successed callback page

"use client";

import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

const PopupCallback = () => {
  const [mounted, setMounted] = useState(false);
  const params = useSearchParams();

  const code = params.get("code");

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!code) return;
    // Send the code to the parent window
    const channel = new BroadcastChannel("popup-channel");
    channel.postMessage({ authResultCode: code });
    window.close();
  }, []);

  if (!mounted) return null;

  // Close the popup if there is no code
  if (!code) {
    window.close();
  }

  return <div>null</div>;
};

export default PopupCallback;

Last, auth request api handler page

import { createClient } from "@/src/utils/supabase/server";
import { NextResponse } from "next/server";

export async function GET(request: Request) {
  // The `/auth/callback` route is required for the server-side auth flow implemented
  // by the SSR package. It exchanges an auth code for the user's session.
  // https://supabase.com/docs/guides/auth/server-side/nextjs
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code");
  const origin = requestUrl.origin;

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

  // URL to redirect to after sign up process completes
  return NextResponse.redirect(`${origin}/user`);
}

thank you

[d5br5]

https://www.d5br5.dev/blog/deep_dive/supabase_oauth_popup

[thebrrt]

I haven't tried implementing this yet, but Doh, you just earned yourself a follower!