metropolitan-bronze•2y 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

6 Replies

correct-apricot•2y 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 🚀

metropolitan-bronze•2y 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

sunny-green•2y ago

@joao_welber can you work us through the process

causal-orange•2y 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...

Origins

generous-apricot•12mo 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.

generous-apricot•12mo ago

My consent screen opens up but after I click confirm I am redirected back to 404 not found page