If I only have 1 provider, is there a way to just ...
# support-questions
m
If I only have 1 provider, is there a way to just go directly to that provider's authorization flow?
r
hey @Michael Brant
Yea. You can do that (i assume that you are using thirdparty recipe): Disable the default UI for the sign in / up screen:
Copy code
ThirdParty.init({
    signInAndUpFeature: {
        disableDefaultUI: true,
        providers: [...]
    }
})
The above will disable the UI shown on /auth route. Then make your own component that's shown on /auth route, and do something like:
Copy code
function AuthComponent(props: any) {
    useEffect(() => {
        Session.doesSessionExist().then(sessionExists => {
            if (sessionExists) {
                // TODO: redirect to dashboard or wherever
            } else {
                ThirdParty.redirectToThirdPartyLogin({
                    thirdPartyId: "google"
                });
            }
        })
    }, []);

    return null;
}
Lmk if this works
m
@rp thanks for the help! When I added AuthComponent as the element of the Route component I got an error saying "ThirdParty.redirectToThirdPartyLogin" is not a function. Would you be able to update this codesandbox to show how to implement it? https://codesandbox.io/s/hopeful-meadow-8zvh1e?file=/src/App.js
r
which version of the auth-react SDK are you using?
ah right. The version you are using is quite old. It doesn't have that function
if you do not want to upgrade to the latest version of the auth-react SDK, instead of using
ThirdParty.redirectToThirdPartyLogin
, you can fetch the redirect URL from the backend and manually redirect the user to that URL. Here is an explanation of which API to query on the backend to get the URL: https://supertokens.com/blog/adding-social-login-to-your-website-with-supertokens
m
thanks, I just upgraded to auth-react 0.22.4 I'm seeing a failed to fetch error on recipeImplementation.js file now. Thoughts on this? I google searched it but nothing came up
r
Perhaps @nkshah2 can help here.
n
Can you check for any network errors?
r
@nkshah2 the codesandbox link is above.
n
@Michael Brant So theres a couple issues I can spot right off the bat. When initialising SuperTokens you are using
try.supertokens.io
as the apiDomain which is incorrect, the way SuperTokens works is that you have a frontend, backend (both using SuperTokens SDKs) and a SuperTokens core (You can see the full architecture here: https://supertokens.com/docs/thirdparty/architecture).
try.supertokens.io
is a SuperTokens core that we host for demo purposes. Once you have the right architecture set up, your code example should work fine. Another thing to keep in mind is that codesandbox can change the URL for your frontend app (For example for me it would use
https://ebse6e.csb.app/
after a couple refreshes) which means you would need to update the values you pass when you call SuperTokens.init