https://supertokens.com/ logo
Join Discord
Powered by
<@498057949541826571> I have several google accoun...
# support-questions-legacy
b
@rp_st I have several google accounts. once I select google account when i am using login with google, I can't choose other google account anymore when I am trying to login again. is there any way to fix this?
r
hey @bian - i don't quite understand. Can you elaborate please?
b
so i am using thirdpartyemailpassword recipe.
i am logging in with google and at first it shows account select page of google and i choose one of my google account and login with it.
and i logout to login using another google account.
but when i click on signup with google again, it does not ask to choose google account and it directly logs into the previous account.
i wanna have account select page always show up.
r
when you click on login again, supertokens redirects you to the google login page correct? Whats the full URL of that page?
b
i believe response of this call holds it but i can't see response of it. trying to find out.

https://cdn.discordapp.com/attachments/1092797645631791214/1092806900501971024/image.png▾

r
yea.. you can see the response from the network tab
b
it redrects to this url. (i replaced some content with XXX)
r
On the backend sdk's google.init, there should be a param which allows you to add extra object props to the authorization url above. Can you add an extra key value in that object like 
prompt: "consent"
b
okay, I will try out.
ThirdPartyEmailPassword.init({ providers: [ ThirdPartyEmailPassword.Google({ clientId: gc.googleClientId, clientSecret: gc.googleClientSecret, scope: ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile"], authorisationRedirect: { params: { prompt: "consent" }, }, }), ],
@rp_st like this?
r
Yea. I think so. See if the extra query param gets added
b
it did the job. great!
thanks.
r
st-bot-test-case
b
@rp_st, hi, this redirects page to google urls to select account. how can i make user select account within popup window like many other sites?
r
i'll let @sattvikc2793 help here.
b
thanks
r
he will help out tomorrow.
s
hey @bian are you using webjs or react SDK ?
b
I am using react sdk.
s
cool, you need to do the following things: first override the Third party component part of the sign in / up form and then add your own buttons for social login. on click of the button, say 
Login with Google
, you need to call the function 
getAuthorisationURLWithQueryParamsAndSetState
on the thirdpartyemailpassword recipe. And that returns a url. using that url, call the window.open function, more details on that here - https://www.w3schools.com/jsref/met_win_open.asp now the entire flow happens on the pop up window. when the sign in / up flow completes, you need to call the window.close() function so that the pop up window can close after the flow completion. on the main window, where you initiated the pop up, you need to handle the close event of the pop up window and reload or redirect as needed. this page has info on how to handle the pop up window close - https://stackoverflow.com/questions/9388380/capture-the-close-event-of-popup-window-in-javascript
b
thanks. i will try out and ask more if i encounter any issue.
s
hi @bian , we have added an example for your use case. Please check if this helps - https://github.com/supertokens/supertokens-auth-react/tree/0.31/examples/with-thirdparty-popup
b
thanks. i got things working, but having minor problem with popup.
r
which is?
b
popup getting blocked on mobile/tablets/ipad.
because window.open is called after await thirdParty.getAuthorisationURLWithQueryParamsAndSetState .
r
right. That may be a browser thing.. not sure
i don't think that the await call before has anything to do with the popup being blocked
b
i thought so and i did some experiments and actually it was.
to be trusted as caused by user's action, it needed to be synchronous.
anyway, seeking for proper fix for that.
r
ahh i see.
what you could do is to hard code the URLs returned by that async call on the frontend directly via an overide
and then no network call would be made
b
one way i tried is to call function on component mount and use it to on window.open.
it works within certain time but i think it has some timeout or sth.
so still trying to find out.
r
i see. Try the hard coding thing i suggested.
b
sorry, i didn't get what hard coding thing means. could u elaborate a little more please?
r
so the value returned from the API call, you could just override the function in our SDK and return that url directly instead of calling the original implementaiton, which makes a network call
b
isn't it sth dynamically generated by backend or sth?
r
it is, but it's the same value each time.. based on the scopes / client id configured on the backend
so if you change the scopes or client id on the backend, then the URL will change, but then you can also change it on the frontend
b
i see. then it is weird that i saw some cases where using url long after it is returned from api yielding "Something went wrong."
const origin = window.location.origin; const providerPopup = window.open( 
${origin}/auth
, "_blank", "width=600,height=600" ); const url = await getAuthorisationURLWithQueryParamsAndSetState({ providerId: provider.id, userContext, authorisationURL: 
${origin}/auth/callback/${provider.id}
, }); if (providerPopup) providerPopup.location.href = url;
for now, this kind of does the job for me.
i need to check more about "Something went wrong" thing.
r
hmm. Okay fair.
> it is returned from api yielding "Something went wrong." That's weird.. it's always a static URL returned based on the backend config. No db call or anything
b
yeah, i definitely need to check why it happens.
and just fyi, about the example code, not sure how popup window gets closed there. i had to use postMessage to communicate between popup and main window.
r
b
i see. got it.
11 Views
PreviousNext
Powered by