absent-sapphire•2y ago

when i click on sign in with google it opens a popup window which is empty. #help

when i click on sign in with google it opens a popup window which is empty. How can i login to the system? Can someone help me out? #ask-any-question

10 Replies

kapa.ai•2y ago

Hey @arsal_rajput! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•2y ago

---------------------- It sounds like you are having trouble logging in with Google. To enable Google Auth on Supabase, you need to head over to app.supabase.com and sign in to your Supabase account. Then, go to Authentication -> Settings to configure the Auth providers. You will find the Google Auth option in the Auth providers section; enable it and set your Google Credentials. Refer to the Supabase docs (https://supabase.com/docs/guides/auth/auth-google#create-your-google-credentials) for more information about setting up your Google Credentials. In your React app, you need to add the Google Login option to the app. To do this, set the provider property of the <AuthPage> component. Here is an example of how to do this:

import { Refine } from '@pankod/refine-core';  
import { AuthPage } from '@pankod/refine-antd';  
import { GoogleOutlined } from "@ant-design/icons";  
...  
  
function App() {  
 return (  
 <Refine  
 ...  
 LoginPage={() => (  
 <AuthPage  
 type="login"  
 providers={[  
 {  
 name: "google",  
 label: "Sign in with Google",  
 icon: (  
 <GoogleOutlined  
 style={{ fontSize: 18, lineHeight: 0 }}  
 />  
 ),  
 },  
 ]}  
 />  
 )}  
 />  
 );  
}

import { Refine } from '@pankod/refine-core';  
import { AuthPage } from '@pankod/refine-antd';  
import { GoogleOutlined } from "@ant-design/icons";  
...  
  
function App() {  
 return (  
 <Refine  
 ...  
 LoginPage={() => (  
 <AuthPage  
 type="login"  
 providers={[  
 {  
 name: "google",  
 label: "Sign in with Google",  
 icon: (  
 <GoogleOutlined  
 style={{ fontSize: 18, lineHeight: 0 }}  
 />  
 ),  
 },  
 ]}  
 />  
 )}  
 />  
 );  
}

This will add a new Google login button to the login page. After the user successfully logs in, the app will redirect back to the app. If you are still having trouble logging in, please provide more information about the issue and we can try to help you further. ----------------------

Add Google OAuth to your Supabase project

kapa.ai•2y ago

Did kapa.ai help answer your question?

<@789067375076442132> kapa.ai is still learning and improving, please let us how it did by reacting with a :thumbsup: or :thumbsdown:

correct-apricot•2y ago

Hello @arsal_rajput, can you give us more context? For example, you can show us console errors

absent-sapphire•2y ago

Yeah sure

absent-sapphire•2y ago

@batuhanw here it is

correct-apricot•2y ago

Hello @arsal_rajput you need to add localhost to the allowed origins in your google app https://stackoverflow.com/a/68469319/5579073

Stack Overflow

The given origin is not allowed for the given client ID (GSI)

I was refactoring my "Sign in with Google" by replacing gapi with gsi on http://localhost:8080. How can gapi work without problems while gsi claims that The given origin is not allowed fo...

absent-sapphire•2y ago

@batuhanw facing this issue now 🥲

correct-apricot•2y ago

This is not an issue with refine, please add localhost as allowed origin to your app correctly. That should fix the issue.

absent-sapphire•2y ago

Thanks @batuhanw issue resolved