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
K
kapa.ai409d ago
Hey @arsal_rajput! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
K
kapa.ai409d 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
K
kapa.ai409d 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:
O
other-emerald409d ago
Hello @arsal_rajput, can you give us more context? For example, you can show us console errors
O
other-emerald409d ago
Yeah sure
O
other-emerald409d ago
@batuhanw here it is
No description
O
other-emerald409d 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...
O
other-emerald409d ago
@batuhanw facing this issue now 🥲
No description
O
other-emerald409d ago
This is not an issue with refine, please add localhost as allowed origin to your app correctly. That should fix the issue.
O
other-emerald409d ago
Thanks @batuhanw issue resolved
More Posts
Tutorial - Generate CRUD PagesHi, I'm going through the tutorial and got upto the Generate CRUD page but it's not working as I wouHOW TO SOLVE WHEN LOGIN SUCCESS BUT DON'T WANT TO MOVE TO NEXT ACTIVITYI'm creating a login activity but after successful login why doesn't it move to the next activity? iplease help if anyone know how to getplease help if anyone know how to get client id for start refineFinefoods Ant Design Admin Panel - refin...Hi everyone, I am new to refine admin framework. My background from SPA react js and Node middlewareNot able to select refine-react option.In quick start guide it’s mentioned that I can select project type I am not getting react option, shSome Ant Design Component's API are deprecated.As title, Some Ant Design's Component's API are deprecated. like...Modal, Breadcrumb, and Menu WouHow to Delete Table that Contains many to many relation?Hello everyone, I am using next.js, mantine, and supabase db. But, i have a problem with delete the How to change the mutation call when the user clicks confirm?How to change the mutation call when the user click: Deletar? By default, it is set to "deleteFacetIcross origin error imagehello everyone I have a problem with creating a new image(), based on an external URL given me crossuseform attach initialfilter strapi v4``` } = useForm({ refineCoreProps: { mutationMode: "pessimistic", //config: { getting startedhow should I get started with refine.dev?Display only certain rows in List view MuiHello everyone !! I have a user ressources in which i have all users (admin and non admin) and need [antd] using filterDropdown and RangePicker to filter date in a range of datesHi, I'm having some trouble filtering data using `<DatePicker.RangePicker>` and `<Filterdorpdown>` fant-modal-wrap background color in useModalI'm using useModal in my project "@pankod/refine-antd": "^4.7.3" Why the modal's background is totaAn error occured while creating git commit.Hello, I'm very new to this and I apologise for my cluelessness but I'm getting this error every timcustom messsage on event notificationHi everyone, i am currently working on permission on my refine app. I allow only admin user to loginedithi all I face issue on updating an item in DB I want to edit on item by opening a new page spaceficlAntd auto complete for text inputsHi does refine support Antd auto complete for text inputs like https://ant.design/components/auto-coCan MUI Inferencer infer form fields for nested objects?I have a number of structures I'm hoping to use the inferencer to stub out create forms for, but so Refine Google Auth Login ProblemI changed the id in the login.tsx but I still get this.