google authentication popup issue.
okay first off what i want: the integrated google authentication to work.
what i have done:
1. created a project with the google auth option.
2. created a client link on console.cloud.google.
3. put the link in login.tsx.
on start i get 3 console errors(also before editing any code):
1. undefined.
2. Failed to load resource: the server responded with a status of 403 ().
3. [GSI_LOGGER]: The given origin is not allowed for the given client ID.
i also tried going on your refine.dev.docs.examples for this exact problem to see the auth work in sandbox mode, i got the same errors there. i get a blank popup where i can't write anything.
i made another project where i also installed everything the same way, same result. i restarted my computer just in case but it changed nothing.
as i'm pretty new with limited knowledge i don't really know what's causing the issue. just where i get the errors, i can provide relevant pictures and information if requested. i'm pretty sure who ever reads this have more knowledge on what's more important to specifically look into than i'am.
thank you.
10 Replies
Hey, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and could not find an answer. Please wait for someone from the refine core team or the community to try to help you. 👊
genetic-orange•2y ago
Hello @w4rz0r , from google cloud, can you add localhost to the allowed origins?
optimistic-gold•2y ago
if i'am to understand you correctly:
on google cloud when creating OAuth client id i put 2 URI's in both authorized javascript origins and authorized redirect URI's.
localhost:3000
localhost
genetic-orange•2y ago
Hey @w4rz0r that's correct, you can check this page for more details: https://developers.google.com/identity/protocols/oauth2/web-server
optimistic-gold•2y ago
ah okay, is this something that is required for me to do? getting access tokens and redirecting to google auth? when creating my project i chose "with google authentication" option both times.
i thought all that i needed to provide was a client id for it to work, maybe i was mistaken. all i wanted was just for it to work so that i could try and edit some code and learn what's what.
genetic-orange•2y ago
Hello @w4rz0r , as you said, you just need to pass client id for it to work on the refine side.
Adding localhost to the allowed origins should happen on the Google cloud side.
optimistic-gold•2y ago
okay so when i tried to create my project, i went into google cloud as you said, and created a client ID.
optimistic-gold•2y ago
i then went and added that client ID to a .env file in my project and named the variable REACT_APP_GOOGLE_CLIENT_ID. then tried to put that into the login.tsx file. have i done something incorrectly? as it's not working. i must have done something wrong.
genetic-orange•2y ago
Hey @w4rz0r you have
https://localhost, it should be without s, just http://localhostoptimistic-gold•2y ago
wait... you're totally right. that's such a rookie mistake by my part. everything works now, thank you so so much. you fixed everything for me.