<@498057949541826571> I have several google accounts. once I select google account when i am using l...

bian

04/04/2023, 1:07 PM

@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?

rp_st

04/04/2023, 1:30 PM

hey @bian - i don't quite understand. Can you elaborate please?

bian

04/04/2023, 1:33 PM

so i am using thirdpartyemailpassword recipe.

bian

04/04/2023, 1:34 PM

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.

bian

04/04/2023, 1:34 PM

and i logout to login using another google account.

bian

04/04/2023, 1:35 PM

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.

bian

04/04/2023, 1:35 PM

i wanna have account select page always show up.

rp_st

04/04/2023, 1:37 PM

when you click on login again, supertokens redirects you to the google login page correct? Whats the full URL of that page?

bian

04/04/2023, 1:44 PM

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▾

rp_st

04/04/2023, 1:44 PM

yea.. you can see the response from the network tab

bian

04/04/2023, 1:48 PM

https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&access_type=offline&include_granted_scopes=true&response_type=code&client_id=669641179662-bb68nni20h6fqfntg6q47qqphvt372vv.apps.googleusercontent.com&state=0804bccdac96584aa216b&redirect_uri=https%3A%2F%2FXXXXX%2Fauth%2Fcallback%2Fgoogle

bian

04/04/2023, 1:49 PM

it redrects to this url. (i replaced some content with XXX)

rp_st

04/04/2023, 1:54 PM

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"

bian

04/04/2023, 2:02 PM

okay, I will try out.

bian

04/04/2023, 2:03 PM

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" }, }, }), ],

bian

04/04/2023, 2:03 PM

@rp_st like this?

rp_st

04/04/2023, 2:04 PM

Yea. I think so. See if the extra query param gets added

bian

04/04/2023, 2:08 PM

it did the job. great!

bian

04/04/2023, 2:08 PM

thanks.

rp_st

04/04/2023, 2:10 PM

st-bot-test-case

bian

04/12/2023, 5:43 PM

@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?

rp_st

04/12/2023, 5:47 PM

i'll let @sattvikc help here.

bian

04/12/2023, 5:49 PM

thanks

rp_st

04/12/2023, 5:59 PM

he will help out tomorrow.

sattvikc

04/13/2023, 5:50 AM

hey @bian are you using webjs or react SDK ?

bian

04/13/2023, 9:49 AM

I am using react sdk.

sattvikc

04/13/2023, 10:12 AM

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

bian

04/14/2023, 4:29 AM

thanks. i will try out and ask more if i encounter any issue.

sattvikc

04/17/2023, 1:26 PM

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

bian

04/17/2023, 4:17 PM

thanks. i got things working, but having minor problem with popup.

rp_st

04/17/2023, 4:17 PM

which is?

bian

04/17/2023, 4:18 PM

popup getting blocked on mobile/tablets/ipad.

bian

04/17/2023, 4:19 PM

because window.open is called after await thirdParty.getAuthorisationURLWithQueryParamsAndSetState .

rp_st

04/17/2023, 4:19 PM

right. That may be a browser thing.. not sure

rp_st

04/17/2023, 4:20 PM

i don't think that the await call before has anything to do with the popup being blocked

bian

04/17/2023, 4:20 PM

i thought so and i did some experiments and actually it was.

bian

04/17/2023, 4:21 PM

to be trusted as caused by user's action, it needed to be synchronous.

bian

04/17/2023, 4:21 PM

anyway, seeking for proper fix for that.

rp_st

04/17/2023, 4:21 PM

ahh i see.

rp_st

04/17/2023, 4:22 PM

what you could do is to hard code the URLs returned by that async call on the frontend directly via an overide

rp_st

04/17/2023, 4:22 PM

and then no network call would be made

bian

04/17/2023, 4:22 PM

one way i tried is to call function on component mount and use it to on window.open.

bian

04/17/2023, 4:23 PM

it works within certain time but i think it has some timeout or sth.

bian

04/17/2023, 4:23 PM

so still trying to find out.

rp_st

04/17/2023, 4:24 PM

i see. Try the hard coding thing i suggested.

bian

04/17/2023, 4:30 PM

sorry, i didn't get what hard coding thing means. could u elaborate a little more please?

rp_st

04/17/2023, 4:38 PM

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

bian

04/17/2023, 4:38 PM

isn't it sth dynamically generated by backend or sth?

rp_st

04/17/2023, 4:39 PM

it is, but it's the same value each time.. based on the scopes / client id configured on the backend

rp_st

04/17/2023, 4:39 PM

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

bian

04/17/2023, 4:41 PM

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."

bian

04/17/2023, 4:43 PM

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;

bian

04/17/2023, 4:43 PM

for now, this kind of does the job for me.

bian

04/17/2023, 4:43 PM

i need to check more about "Something went wrong" thing.

rp_st

04/17/2023, 4:43 PM

hmm. Okay fair.

rp_st

04/17/2023, 4:44 PM

> 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

bian

04/17/2023, 4:44 PM

yeah, i definitely need to check why it happens.

bian

04/17/2023, 4:46 PM

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.

rp_st

04/17/2023, 4:48 PM

this is where it gets closed: https://github.com/supertokens/supertokens-auth-react/blob/master/examples/with-thirdparty-popup/frontend/src/config.tsx#L35 This function is called on the callback screen

bian

04/17/2023, 4:48 PM

i see. got it.

10 Views

Previous Next

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).