Google login with Supabase (popup window)

"use client";
 
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;

"use client";
 
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 null;
};
 
export default PopupCallback;

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`);
}