https://supertokens.com/ logo
Channels
Powered by
b

Bruno Diferente

06/27/2022, 1:23 PM
Hello everyone, I'm redesigning authentication pages, and have chosen to use 
APIs
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
r

rp

06/27/2022, 1:25 PM
hey! Have you read this blog?
b

Bruno Diferente

06/27/2022, 1:25 PM
Hey there how are you doing ?
Will check
r

rp

06/27/2022, 1:25 PM
im good! thanks. How about you?
b

Bruno Diferente

06/27/2022, 1:25 PM
I don't think i've visited the blog before
r

rp

06/27/2022, 1:25 PM
yea. the blog highlights all the steps needed for a custom UI
b

Bruno Diferente

06/27/2022, 1:25 PM
Fine ty
Hey there
I did read the article and i was missing the 
rid
header
I've added the header and still get the same error nb i'm using 
axios
@rp Well what i see the difference between my callback and the original callback is a missing 
state
query
Copy code
export 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 };
};
This is my function
how ever the callback page always redirect to 
localhost:3000/app/auth/signin?error=signin
http://localhost:3000/app/auth/callback/github?code=2d04569ec30aa9510447
this is the callback url however it always ends with the link above
r

rp

06/27/2022, 2:17 PM
hey! Im not exactly sure about what you are trying to do here. the result of calling 
/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.
b

Bruno Diferente

06/27/2022, 2:21 PM
even with that it is not working
however i added a new query
r

rp

06/27/2022, 2:21 PM
what is the issue? can you show me the error mesage?
b

Bruno Diferente

06/27/2022, 2:22 PM
&state=d2d68fe8094519207d781
and everything is just fine
r

rp

06/27/2022, 2:22 PM
you shouldn't have to do that.
b

Bruno Diferente

06/27/2022, 2:22 PM
Was just experemnting
r

rp

06/27/2022, 2:22 PM
i see.
does github complain about missing state?
b

Bruno Diferente

06/27/2022, 2:22 PM
That's the issue I don't have any error to track
The url just changes from 
http://localhost:3000/app/auth/callback/github?code=2d04569ec30aa9510447
to`signin=error`
r

rp

06/27/2022, 2:25 PM
i see. Oh, so you are using our auth-react SDK?
and making your own UI from that?
b

Bruno Diferente

06/27/2022, 2:26 PM
Yes i kept the config and everything
I took the apis and called them instead of supertokens with custom UI
r

rp

06/27/2022, 2:26 PM
oh i see. They yea.. this is expected cause when you get back to /auth/callback/github, then our SDK checks for the state (which it adds if you use the pre built UI)
So what you want to do is to disable the default implementation in the callback page as well, and then add your own logic there to call the signinup API
b

Bruno Diferente

06/27/2022, 2:27 PM
Wait i didn't tell you i kept the default callback page
r

rp

06/27/2022, 2:27 PM
righrt yea.. don't do that
that will cause an issue like the one you are seeing
I'll tell you what
which version of the auth-react SDK are you using?
b

Bruno Diferente

06/27/2022, 2:28 PM
Yes go ahead please
r

rp

06/27/2022, 2:28 PM
b

Bruno Diferente

06/27/2022, 2:28 PM
0.18.7
r

rp

06/27/2022, 2:28 PM
Then it will all work even with the default callback UI
You can upgrade to the latest versino of the SDK for this functioun
and then when the user clicks on the social provider's button, then you can call that function like this:
Copy code
<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 work
We recently added a bunch of these helper functions to the SDK for custom UI building. But have yet to document them.
b

Bruno Diferente

06/27/2022, 2:32 PM
Alrighty
r

rp

06/27/2022, 2:32 PM
be sure to check the changelog thought. Quite a few changes since 0.18
b

Bruno Diferente

06/27/2022, 2:38 PM
Yes i should pay attention to that, thanks @rp have a nice day
r

rp

06/27/2022, 2:41 PM
You too! Lmk if any issues
2 Views
Powered by