Bruno Diferente
06/27/2022, 1:23 PMAPIs
with Axios
directly to authenticate users,
I'm having issue with thirdParty
implementation. the state
query is missing in my callback page after
using axios with url : ...../auth/authorisationurl?thirdPartyId=github
and GET
method will always redirect to default callback page
then it ends by redirection to signin?error=signin
rp_st
06/27/2022, 1:25 PMrp_st
06/27/2022, 1:25 PMBruno Diferente
06/27/2022, 1:25 PMBruno Diferente
06/27/2022, 1:25 PMrp_st
06/27/2022, 1:25 PMBruno Diferente
06/27/2022, 1:25 PMrp_st
06/27/2022, 1:25 PMBruno Diferente
06/27/2022, 1:25 PMBruno Diferente
06/27/2022, 1:47 PMBruno Diferente
06/27/2022, 1:48 PMrid
headerBruno Diferente
06/27/2022, 1:52 PMaxios
Bruno Diferente
06/27/2022, 2:00 PMstate
queryBruno Diferente
06/27/2022, 2:01 PMexport const useThirdPartyAuth = () => {
const thirdPartyAuth = (provider: ThirdPartyProviders) => async () => {
const { data } = await fetchSupertokens<any>({
headers: {
rid: "thirdpartyemailpassword",
},
url: `authorisationurl?thirdPartyId=${provider}`,
});
console.log(data.url);
if (data.url) {
window.location.href = data.url;
}
};
return { thirdPartyAuth };
};
Bruno Diferente
06/27/2022, 2:01 PMBruno Diferente
06/27/2022, 2:02 PMlocalhost:3000/app/auth/signin?error=signin
Bruno Diferente
06/27/2022, 2:10 PMhttp://localhost:3000/app/auth/callback/github?code=2d04569ec30aa9510447
this is the callback url however it always ends with the link aboverp_st
06/27/2022, 2:17 PM/authorisationurl
will be a URL to the provider's site. To that, you need to append the redirect_uri query param before redirecting the user (As the blog says).
Then the social provider will redirect the user back to your site (on /auth/callback/github for example). On this page, you need to call the /signinup
POST API (as shown in the article). The input to that API should be the provider ID and the code sent by the provider.Bruno Diferente
06/27/2022, 2:21 PMBruno Diferente
06/27/2022, 2:21 PMrp_st
06/27/2022, 2:21 PMBruno Diferente
06/27/2022, 2:22 PM&state=d2d68fe8094519207d781
Bruno Diferente
06/27/2022, 2:22 PMrp_st
06/27/2022, 2:22 PMBruno Diferente
06/27/2022, 2:22 PMrp_st
06/27/2022, 2:22 PMrp_st
06/27/2022, 2:22 PMBruno Diferente
06/27/2022, 2:22 PMBruno Diferente
06/27/2022, 2:25 PMhttp://localhost:3000/app/auth/callback/github?code=2d04569ec30aa9510447
Bruno Diferente
06/27/2022, 2:25 PMrp_st
06/27/2022, 2:25 PMrp_st
06/27/2022, 2:25 PMBruno Diferente
06/27/2022, 2:26 PMBruno Diferente
06/27/2022, 2:26 PMrp_st
06/27/2022, 2:26 PMrp_st
06/27/2022, 2:27 PMBruno Diferente
06/27/2022, 2:27 PMrp_st
06/27/2022, 2:27 PMrp_st
06/27/2022, 2:27 PMrp_st
06/27/2022, 2:28 PMrp_st
06/27/2022, 2:28 PMBruno Diferente
06/27/2022, 2:28 PMrp_st
06/27/2022, 2:28 PMBruno Diferente
06/27/2022, 2:28 PMrp_st
06/27/2022, 2:28 PMrp_st
06/27/2022, 2:28 PMrp_st
06/27/2022, 2:30 PM<button onClick={() => {
ThirdPartyEmailPassword.redirectToThirdPartyLogin({thirdPartyId: "github"})
}}/>
And this will do everything you are doing manually (like calling the authorisation API, adding the redirect_uri etc..) and take the user to github.
Then when the user comes back to your app, the default callback screen should workrp_st
06/27/2022, 2:31 PMBruno Diferente
06/27/2022, 2:32 PMrp_st
06/27/2022, 2:32 PMBruno Diferente
06/27/2022, 2:38 PMrp_st
06/27/2022, 2:41 PM