afraid-scarlet
afraid-scarlet16mo ago

Refine Google Auth Login Problem

I am literally stuck in a problem that it seems i can't solve. I did all the refine setup requirements according to the initial part of the video but, when i try to login, the signup google pop up appears and it's blanc. I tried to solve it, looking for any specific configuration details on the docs but got nothing. I wonder if someone could help me solve this problem! This is from a YouTube Tutorial: Build and Deploy a Full Stack MERN Application With CRUD, Auth, and Charts Using Refine
No description
No description
6 Replies
conscious-sapphire
conscious-sapphire16mo ago
Hey @joao_welber looks like you forgot to provide your Client ID to the configuration 🤔 Can you check your login.tsx file, in there you should see a code block like this;
window.google.accounts.id.initialize({
ux_mode: "popup",
client_id: "your-client-id",
callback: async (res: CredentialResponse) => {
if (res.credential) {
login(res);
}
},
});
window.google.accounts.id.initialize({
ux_mode: "popup",
client_id: "your-client-id",
callback: async (res: CredentialResponse) => {
if (res.credential) {
login(res);
}
},
});
you need to provide your client_id there 🚀
afraid-scarlet
afraid-scarlet16mo ago
I already saw it before you give me the answer but THANKS a lot pal! i will configure the client id in the project and come back later in case i have any issue with that! I created a new web app credentials at console.cloud.google and took the client_id and configured in my application and it worked!! Thank you once again for your support @aliemirs
correct-apricot
correct-apricot16mo ago
@joao_welber can you work us through the process
extended-salmon
extended-salmon16mo ago
@joao_welber Figured it out. Follow this video until 1:52. https://youtu.be/HtJKUQXmtok But in the origins, you'll need to add localhost and localhost:3000 (screenshot attached). Also make sure to update the login.tsx as mentioned above. I also cleared my browser data after and no more white screen.
Cooper Codes
YouTube
Google OAuth 2.0 Login for React in 5 minutes
Support the channel and get a free month of Skillshare: https://skillshare.eqcm.net/coopercodes Enjoying my videos? Sign up for more content here: https://www.coopercodes.com/ UPDATE: This implementation is no longer supported by Google, for the new way to use Google Login with React check out my new video here https://www.youtube.com/watch?v=r...
plain-purple
plain-purple10mo ago
@stevenolmos.design @joao_welber Hi, I have Client ID in my Login.tsx file but still I am not redirected back to the app, the only difference is I am using Vite so my port is 5173. I have attached my Google Cloud config in the pic.
No description
plain-purple
plain-purple10mo ago
My consent screen opens up but after I click confirm I am redirected back to 404 not found page
No description