vicious-gold
vicious-gold•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
No description
10 Replies
kapa.ai
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
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. ----------------------
Login with Google | Supabase Docs
Add Google OAuth to your Supabase project
kapa.ai
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:
genetic-orange
genetic-orange•2y ago
Hello @arsal_rajput, can you give us more context? For example, you can show us console errors
vicious-gold
vicious-gold•2y ago
Yeah sure
vicious-gold
vicious-gold•2y ago
@batuhanw here it is
No description
genetic-orange
genetic-orange•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...
vicious-gold
vicious-gold•2y ago
@batuhanw facing this issue now 🥲
No description
genetic-orange
genetic-orange•2y ago
This is not an issue with refine, please add localhost as allowed origin to your app correctly. That should fix the issue.
vicious-gold
vicious-gold•2y ago
Thanks @batuhanw issue resolved