https://supertokens.com/ logo
Join Discord
Powered by
Hello, I'm trying to authorize with Twitter Oauth2...
# support-questions-legacy
y
Hello, I'm trying to authorize with Twitter Oauth2, her's my custom provider config:
Copy code
{
          config: {
              thirdPartyId: "twitter",
              name: "Twitter",
              clients: [{
                  clientId: twitterClientId,
                  clientSecret: twitterClientSecret,
                  scope: ["users.read"]
              }],
              authorizationEndpoint: "https://twitter.com/i/oauth2/authorize",
              tokenEndpoint: "https://api.twitter.com/2/oauth2/token",
              UserInfoEndpoint: "https://api.twitter.com/2/users",
          }
        }
I'm using core5 and the follow version of the npm packages: frontend: "supertokens-auth-react": "0.31.0", "supertokens-web-js": "0.5.0", backend: "supertokens-node": "^13.6.0",
r
Hey. Can I see the response body?
Of the api call that fails with a 400
y
Copy code
{
  "message": "The third party provider twitter seems to be missing from the backend configs."
}
and this is my front-end code:
Copy code
{
            id: "twitter",
            name: "Twitter",
            buttonComponent: (
              <button data-supertokens="button providerButton">
                <div data-supertokens="providerButtonLeft">
                  <div data-supertokens="providerButtonLogo">
                    <div data-supertokens="providerButtonLogoCenter">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        height="1em"
                        viewBox="0 0 50 50" 
                        width="25px"
                      >
                        <path d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"/>
                      </svg>
                    </div>
                  </div>
                </div>
                <div data-supertokens="providerButtonText">
                  Continue with Twitter
                </div>
              </button>
            ),
          },
r
Hmm. This should be working.
Can I see the full supertokens.init on the backend?
y
Copy code
const superTokensConfig = {
  supertokens: {
    connectionURI,
    apiKey,
  },
  appInfo: {
    appName: "SuperTokens Auth App",
    apiDomain: process.env.API_ENDPOINT,
    websiteDomain: process.env.WEB_ENDPOINT,
    apiBasePath: "/auth",
    websiteBasePath: "/auth",
  },
  // recipeList contains all the modules that you want to
  // use from SuperTokens. See the full list here: https://supertokens.com/docs/guides
  recipeList: [
    ThirdPartyPasswordless.init({
      providers: [
        ThirdPartyPasswordless.Google({
          clientId: googleClientId,
          clientSecret: googleClientSecret,
        }),
        ThirdPartyPasswordless.Discord({
          clientId: discordClientId,
          clientSecret: discordClientSecret,
        }),
        ThirdPartyPasswordless.Apple(appleConfig),
        {
          config: {
              thirdPartyId: "twitter",
              name: "Twitter",
              clients: [{
                  clientId: twitterClientId,
                  clientSecret: twitterClientSecret,
                  scope: ["users.read"]
              }],
              authorizationEndpoint: "https://twitter.com/i/oauth2/authorize",
              tokenEndpoint: "https://api.twitter.com/2/oauth2/token",
              UserInfoEndpoint: "https://api.twitter.com/2/users",
          }
        }
      ],
      contactMethod: "EMAIL",
      flowType: "USER_INPUT_CODE_AND_MAGIC_LINK",
    }),
    Session.init(),
    Dashboard.init({
      apiKey,
    }),
    UserMetadata.init(),
  ],
};
r
Oh. Hmm. Which version of the backend SDK are you using?
y
"supertokens-node": "^13.6.0",
r
Ah right. That’s an older version
The docs are for the latest version
y
yes, bc we're on core 5
r
Right.
I can find the docs for the version that you are using. One min
y
that'd be awesome, thx
r
y
Ok, let me take a look
Wow, the API has changed dramatically!
r
Yup!
Improvements..
y
Hmm... it's better, I now hit the twitter BE
I have a hard time understand how to map the old API with twitter's oauth2's endpoints.But getting this error now,
Copy code
{
  "error": "invalid_request",
  "error_description": "Value passed for the redirect uri did not match the uri of the authorization code."
}
r
Right. So you need to check the callback url you entered on twitter dashboard.
y
Hmm, I think that works ok I verified with core6 and passport. Am I passing the right values in the config?
message
r
I mean what’s the callback url you configured on twitter?
y
r
It should be /auth/callback/twitter
y
Ahhh 😱 thx
Getting closer, thx fo rur help man
@rp
generated URL by the custom recipe should be like this: https://twitter.com/i/api/2/oauth2/authorize? but it's like this https://twitter.com/i/oauth2/authorize?response_type=code&
r
This means the URL you provided in your custom provider impl is wrong
y
Hmm, the url I provided is correct and this url `https://twitter.com/i/oauth2/authorize is somehow constructed by supertoken node package, we're sure Twitter oauth2 flow supported by "supertokens-node": "^13.6.0"
r
Can I see your custom provider implementation on the backend?
Also, I’ll probably be able to continue helping on Monday
In case I don’t reply then, please feel free to ping me here again on Monday.
y
I pasted my config above as a file
Ok, thanks for your help @rp
I'm going to call it a day anyway, it's late where I am
s
@yacc000 I suggest we proceed this way: - Get a new Supertokens API Key for a new production environment based on latest version - Adapt our internal DB to ignore the Supertokens UserIDs and consider only our internal IDs — @rp_st we added it because we added support for blockchains accounts - Set up a parallel system using the new environment and let it work as expected - When ready, switch between the two systems This way we should have 0 downtime.
y
Hey @rp, thanks for your help so far. I'm stuck again implementing twitter ouath2, I'm using latest version of npm packages and sdk and I'm core 6. The auth request goes to twitter, then the end users but is rejected this this error by Supertoken BE. {"error":"unauthorized_client","error_description":"Missing valid authorization header"}" This is my custom recipe for twitter: config: { thirdPartyId: "twitter", name: "Twitter", clients: [{ clientId: twitterClientId, clientSecret: twitterClientSecret, scope: ["users.read"], forcePKCE: true, clientType: "CONFIDENTIAL", }], authorizationEndpoint: "https://twitter.com/i/oauth2/authorize", // https://developer.twitter.com/en/docs/authentication/oauth-2-0/authorization-code authorizationEndpointQueryParams: { response_type: "code", state: "STATE", scope: "users.read", code_challenge_method: "S256", // code_challenge_method: "plain", code_challenge: "CODE_CHALLENGE", }, tokenEndpoint: "https://api.twitter.com/2/oauth2/token", tokenEndpointBodyParams: { grant_type: "client_credentials", }, UserInfoEndpoint: "https://api.twitter.com/2/users/me?user.fields=profile_image_url,url", } }
How do I get that with Supertoken
r
@sattvikc can help here.
he will probably help out tomorrow.
y
Thanks @rp_st
@sattvikc Any update on this?
r
hey can help in a few hours from now
s
we are also looking for the twitter solution. I wonder if someone could open a PR with twitter provider so we have it as built in provider
s
hi, it seems to be a bit involved, I'll have to go through the docs. I will provide the code snippets tomorrow
hey, here's the provider snippet for twitter, let me know if it helps:
y
@sattvikc We're not on Typescript... can you provide a non ts version?
r
hey @yacc000 that would be difficult for us to do
you can just remove the types easily
44 Views
PreviousNext
Powered by