Hi there. I'm trying to implement auth with multiple custom providers. I have the following code to create a list of providers based on a configuration file

javascript
const providers = connections.map(({ id, authUrl, tokenUrl, clientId, clientSecret, scopes }) => {
  return {
    id,
    get: (redirectURI: undefined | string, authCodeFromRequest: undefined | string) => {
      return {
        accessTokenAPI: {
          url: tokenUrl,
          params: {
            client_id: clientId,
            client_secret: clientSecret,
            grant_type: "authorization_code",
            redirect_uri: process.env.AUTH_SUCCESS_REDIRECT_URI,
            code: authCodeFromRequest || '',
          }
        },
        authorisationRedirect: {
          url: authUrl,
          params: {
            client_id: clientId,
            scope: scopes,
            response_type: "code",
            redirect_uri: process.env.AUTH_SUCCESS_REDIRECT_URI,
          }
        },
        getClientId: () => clientId,
        getProfileInfo: async (accessTokenAPIResponse: any) => {
          console.log(accessTokenAPIResponse);
          return {
              id: "...",
          };
        }
      }
    }    

  }
});

I can successfully login with a provider and I can see I can get redirected to the

process.env.AUTH_SUCCESS_REDIRECT_URI

. But the code inside

getProfileInfo

is never called. Also, I have followed the guide (https://supertokens.com/docs/thirdparty/common-customizations/getting-provider-access-token) to get the provider access token but that doesn't get called either. What am I doing wrong?

this seems about right

I am not sure if it does. Should I configure the front-end to call the signup API? Or is it done automatically by the SDK?

Oh right. If you have made your own callback route and are not using the default sdk’s then you have to call the signinup API. There should be a function exposed by the SDK to do that

Thanks @rp_st ! Which of the functions should I call?

oh cool! I found it last night but I wasn't sure what input is! So I'll try and call it without args

We are writing docs for custom Ui

Hmm I didn't know localStorage was used

Right. So when you redirect them user to the login page of the provider, supertoeks sets some content in localstorage like the state

Here's how I understand the flow works now: 1. I call this in my React app:

ThirdParty.redirectToThirdPartyLogin({ thirdPartyId: 'slack' })

2. The user goes through the auth process with the provider 3. The provider redirects the user back to whatever redirect uri I set 4. Now at this stage I need to call https://supertokens.com/docs/auth-react/modules/recipe_thirdparty.html#signInAndUp-1

U understood it correctly. You need to create the route for there callback. We have a route already that we provide which is /auth/callback/ but you are using a different route, so you need to make that route yourself.

In this case its /login/callback/.

ok got it. And for the route to be autogenerated do I need to do anything? any config?

You need to add our function to your router. Checkout. Backend quick setup docs for the recipe

"You need to add our function to your route" --> Do you mean front-end route or backend?

The name of the component is https://supertokens.com/docs/auth-react/modules/recipe_thirdparty.html#SignInAndUpCallback

ok! So let's say I do not use my own redirct uri and I use the

/login/callback/<providerId>

as expected by supertokens

ok. So there are three methods here: Method 1) Add our router function to your routes which will handle the callback screen by itself. Method 2) Make your own route on the frontend and in that route, render the

SignInAndUpCallback />

component which will take care of things for you and show our default spinner UI Method 3) Build your own route + your own UI and call the

ThirdParty.signInAndUp()

function yourself in a useEffect Since you are building your own UI, I would recommend doing Method 3

ok gotcha!

ok thank you

It’s not out of date. It just uses the supertokens-web-js SDK which is slightly different that the supertokens-auth-react SDK.

well let's see 🙂 I'll try do the method 3 you suggested!

Cool!

hi @rp_st I actually followed method 1 above and made some progress. However, when the callback gets back eventually it gets resolved to this url

login?rid=thirdparty&error=no_email_present

Looking at the error param I thought to check the

getProfileInfo

for the provider. My implementation just returns the id back and I can see that the return type: https://github.com/supertokens/supertokens-node/blob/5a00a138/lib/ts/recipe/thirdparty/types.ts#L32 doesn't require an email to be returned, just the id. What might be the issue here?

Ah no. It does require the email as well. If the provider returns no email, just return any randomly generated email with isVerified to true

yeah sure

Well, actually technically it is optional, just that it shows an error to the user to use a different provider.

ok!

Thanks

Also, since the access_token is available in this response is there any chance I can add it to the user metadata here? Instead of overriding the

signInUpPOST

Not really. The user has not yet been created in SuperTokens.

hmmm ok I got it

Yeaaa. We don’t yet unfortunately. Working on it though. But I’d be happy to tell you on call.

for sure! I'll give it a go on my own and let you know! thanks!

Cool