Hello, I'm trying to authorize with Twitter Oauth2, her's my custom provider config: ``` { ...

yacc000

09/16/2023, 4:01 PM

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",

rp_st

09/16/2023, 4:05 PM

Hey. Can I see the response body?

rp_st

09/16/2023, 4:05 PM

Of the api call that fails with a 400

yacc000

09/16/2023, 4:43 PM

Copy code

{
  "message": "The third party provider twitter seems to be missing from the backend configs."
}

yacc000

09/16/2023, 4:45 PM

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>
            ),
          },

rp_st

09/16/2023, 4:45 PM

Hmm. This should be working.

rp_st

09/16/2023, 4:46 PM

Can I see the full supertokens.init on the backend?

yacc000

09/16/2023, 4:46 PM

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(),
  ],
};

rp_st

09/16/2023, 4:47 PM

Oh. Hmm. Which version of the backend SDK are you using?

yacc000

09/16/2023, 4:47 PM

"supertokens-node": "^13.6.0",

rp_st

09/16/2023, 4:47 PM

Ah right. That’s an older version

rp_st

09/16/2023, 4:47 PM

The docs are for the latest version

yacc000

09/16/2023, 4:47 PM

yes, bc we're on core 5

rp_st

09/16/2023, 4:48 PM

Right.

rp_st

09/16/2023, 4:48 PM

I can find the docs for the version that you are using. One min

yacc000

09/16/2023, 4:48 PM

that'd be awesome, thx

rp_st

09/16/2023, 4:52 PM

https://github.com/supertokens/docs/blob/6a23ed0363e60c20ec01e4ec5d45d9bb7032511a/v2/thirdpartypasswordless/common-customizations/signup-form/custom-providers.mdx

yacc000

09/16/2023, 4:55 PM

Ok, let me take a look

yacc000

09/16/2023, 4:59 PM

Wow, the API has changed dramatically!

rp_st

09/16/2023, 4:59 PM

Yup!

rp_st

09/16/2023, 5:00 PM

Improvements..

yacc000

09/16/2023, 5:09 PM

Hmm... it's better, I now hit the twitter BE

yacc000

09/16/2023, 5:11 PM

I have a hard time understand how to map the old API with twitter's oauth2's endpoints.But getting this error now,

yacc000

09/16/2023, 5:11 PM

Copy code

{
  "error": "invalid_request",
  "error_description": "Value passed for the redirect uri did not match the uri of the authorization code."
}

rp_st

09/16/2023, 5:12 PM

Right. So you need to check the callback url you entered on twitter dashboard.

yacc000

09/16/2023, 5:13 PM

Hmm, I think that works ok I verified with core6 and passport. Am I passing the right values in the config?

message

rp_st

09/16/2023, 5:14 PM

I mean what’s the callback url you configured on twitter?

yacc000

09/16/2023, 5:15 PM

http://localhost:3000/auth/twitter/callback

rp_st

09/16/2023, 5:15 PM

It should be /auth/callback/twitter

yacc000

09/16/2023, 5:17 PM

Ahhh 😱 thx

yacc000

09/16/2023, 5:17 PM

Getting closer, thx fo rur help man

yacc000

09/16/2023, 5:31 PM

@rp

yacc000

09/16/2023, 5:31 PM

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&

rp_st

09/16/2023, 5:32 PM

This means the URL you provided in your custom provider impl is wrong

yacc000

09/16/2023, 5:42 PM

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"

rp_st

09/16/2023, 5:42 PM

Can I see your custom provider implementation on the backend?

rp_st

09/16/2023, 5:43 PM

Also, I’ll probably be able to continue helping on Monday

rp_st

09/16/2023, 5:43 PM

In case I don’t reply then, please feel free to ping me here again on Monday.

yacc000

09/16/2023, 5:43 PM

I pasted my config above as a file

yacc000

09/16/2023, 5:44 PM

Ok, thanks for your help @rp

yacc000

09/16/2023, 5:44 PM

I'm going to call it a day anyway, it's late where I am

sullof

09/16/2023, 5:54 PM

@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.

yacc000

09/19/2023, 11:59 AM

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", } }

yacc000

09/19/2023, 12:01 PM

I think the flow that I need is the following https://developer.twitter.com/en/docs/authentication/oauth-2-0/user-access-token

yacc000

09/19/2023, 12:01 PM

How do I get that with Supertoken

rp_st

09/19/2023, 1:12 PM

@sattvikc can help here.

rp_st

09/19/2023, 1:13 PM

he will probably help out tomorrow.

yacc000

09/19/2023, 6:35 PM

Thanks @rp_st

yacc000

09/20/2023, 5:38 AM

@sattvikc Any update on this?

rp_st

09/20/2023, 5:41 AM

hey can help in a few hours from now

simon7000

09/20/2023, 11:33 AM

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

sattvikc

09/20/2023, 12:33 PM

hi, it seems to be a bit involved, I'll have to go through the docs. I will provide the code snippets tomorrow

sattvikc

09/21/2023, 5:27 AM

hey, here's the provider snippet for twitter, let me know if it helps:

sattvikc

09/21/2023, 5:27 AM

message

yacc000

09/21/2023, 7:20 AM

@sattvikc We're not on Typescript... can you provide a non ts version?

rp_st

09/21/2023, 7:20 AM

hey @yacc000 that would be difficult for us to do

rp_st

09/21/2023, 7:20 AM

you can just remove the types easily

43 Views

Previous Next

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).