Hi, I was implementing the thirdPartyemailpassword...
# general
y
Hi, I was implementing the thirdPartyemailpassword recipe with custom provider outlook. When I call the provider from frontend using default supertoken SDK it gives an error. I checked the logs and the authorization code is recieved by the frontend..but after this there is a call made ?rid=thirdpartyemailpassword&error=signin and it errors out.
n
Hey, can you share the full URL of the
/callback/outlook
route? (from your screenshot)
y
Okay
n
Can you share the config you are using when calling SuperTokens.init on the frontend and backend?
y
Frontend
Backend
{ id: "outlook", get: (redirectURI, authCodeFromRequest) => { return { accessTokenAPI: { // this contains info about the token endpoint which exchanges the auth code with the access token and profile info. url: "https://login.microsoftonline.com/common/oauth2/v2.0/token", params: { // example post params client_id: "dc3172bf-ff39-4dba-a2e1-86ffd50b68b9", client_secret: "L2Q7Q~.w7~JCCfrnCWefbYAj6-8sZFq3L9XwB", grant_type: "authorization_code", redirect_uri: "http://localhost:3000/callback/outlook/", code: authCodeFromRequest, } }, authorisationRedirect: { // this contains info about forming the authorisation redirect URL without the state params and without the redirect_uri param url: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize", params: { client_id: "dc3172bf-ff39-4dba-a2e1-86ffd50b68b9", scope: "https://graph.microsoft.com/User.Read", response_type: "code", redirect_uri: "http://localhost:3000/callback/outlook/", } }, getClientId: () => { return "dc3172bf-ff39-4dba-a2e1-86ffd50b68b9"; },
getProfileInfo: async (accessTokenAPIResponse) => { console.log(accessTokenAPIResponse) try{ let response = await axios.request({ method: "get", url: "https://graph.microsoft.com/v1.0/me", headers: { Authorization:
Bearer ${accessTokenAPIResponse.access_token}
, }, }); const email = response.data.mail || response.data.userPrincipalName return { id: response.data.id, email: { id: email, isVerified: true } }; }catch(err){ console.log(err) throw new Error(err) } } } } }
n
Thanks, could you also include the
appInfo
for both the frontend and backend (Stripping any API keys you may be using)
y
Frontend
appName: "growthpal", apiDomain: "http://127.0.0.1:5000", websiteDomain: "http://127.0.0.1:3000", apiBasePath: "/", websiteBasePath: "/"
Backend
appName: "growthpal", apiDomain: "http://127.0.0.1:5000", websiteDomain: "http://127.0.0.1:3000", apiBasePath: "/", websiteBasePath: "/",
the domains dont have ending forwardslash
n
Thanks, give me a minute
Just to clarify, when you launched your application the first time (before clicking Outlook). Did you launch using
127.0.0.1:3000
or with
localhost:3000
?
y
I used react app it automatically starts with 127.0.0.1:3000
n
It might be easier to debug this over a quick call, if you dont mind
redirect_uri: "http://localhost:3000/callback/outlook/"
This should use
127.0.0.1:3000
and not localhost. In the screenshots you shared I notice that the
/callback/outlook
route opens on
localhost
but the rest of your application is using
127.0.0.1
@User
Can you change it to use
127.0.0.1
everywhere and see if the problem still occurs?
y
Okay
Its working!
Thanks man
But can you tell me why the error was there?
n
So the third party auth flow uses sessionStorage internally, because there were two domains involved the storage does not get shared (
localhost
cannot share it with
127.0.0.1
)
y
Oh Okay got it
Thanks again
n
Happy to help
2 Views