Hey! I'm new to supertokens and I keep running into issues, I'm trying to integrate supertokens into a angular app using https://app.swaggerhub.com/apis/supertokens/FDI/1.13.0 and https://supertokens.com/blog/adding-social-login-to-your-website-with-supertokens. And I get my callback and the code from github, and when i make the final

/signinup

it fails with:

error: "Request failed with status code 401"
status: "FIELD_ERROR"

My code:

js
const code = parseCodeFromUrl();
const provider = 'github';
const environment = {
    currentAddress: "http://localhost.com" //<- dev server address
};
const response = await this.axiosInstance.post(
      '/auth/signinup',
      {
        code,
        redirectURI: `${environment.currentAddress}/callback/${provider}`,
        thirdPartyId: provider,
      },
      {
        headers: {
          'rid': 'thirdpartyemailpassword'
        }
      }
    );

Hey! I'm new to supertokens and I keep running into issues, I'm trying to integrate supertokens into a angular app using https://app.swaggerhub.com/apis/supertokens/FDI/1.13.0 and https://supertokens.com/blog/adding-social-login-to-your-website-with-supertokens. And I get my callback and the code from github, and when i make the final

/signinup

it fails with:

error: "Request failed with status code 401"
status: "FIELD_ERROR"

My code:

js
const code = parseCodeFromUrl();
const provider = 'github';
const environment = {
    currentAddress: "http://localhost.com" //<- dev server address
};
const response = await this.axiosInstance.post(
      '/auth/signinup',
      {
        code,
        redirectURI: `${environment.currentAddress}/callback/${provider}`,
        thirdPartyId: provider,
      },
      {
        headers: {
          'rid': 'thirdpartyemailpassword'
        }
      }
    );

Yes,

ts
supertokens.init({
    framework: 'fastify',
    supertokens: {
        //FIXME try.supertokens.com is for demo purposes. Replace this with the address of your core instance (sign up on supertokens.com), or self host a core.
        connectionURI: 'https://try.supertokens.com',
        // apiKey: "IF YOU HAVE AN API KEY FOR THE CORE, ADD IT HERE",
    },
    appInfo: {
        appName: 'TrainNet',
        apiDomain: process.env['NODE_ENV'] === 'production' ? 'https://api.trainnet.novy.software' : 'http://api.localhost.com',
        websiteDomain: process.env['NODE_ENV'] === 'production' ? 'https://trainnet.novy.software' : 'http://localhost.com',
        apiBasePath: '/auth',
        websiteBasePath: '/auth'
    },
    recipeList: [
        ThirdPartyEmailPassword.init({
            providers: [
                //FIXME We have provided you with development keys which you can use for testsing.
                Github({
                    clientId: '467101b197249757c71f',
                    clientSecret: 'e97051221f4b6426e8fe8d51486396703012f5bd'
                }),
            ]
        }),
        Session.init() // initializes session features
    ]
});

import { plugin as supertokensPlugin, errorHandler as supertokensErrHandler } from 'supertokens-node/framework/fastify';
fastify.register(supertokensPlugin);
fastify.setErrorHandler(supertokensErrHandler());

Can you try something like this and see what the error output is:

js
let github = ThirdPartyEmailPassword.Github({
    clientId: "",
    clientSecret: "",
});
ThirdPartyEmailPassword.init({
    providers: [
        {
            ...github,
            get: function (redirectURI: string | undefined, authCodeFromRequest: string | undefined, userContext: any) {
                let getResult = github.get(redirectURI, authCodeFromRequest, userContext);
                return {
                    ...getResult,                    
                    getProfileInfo: async function (authCodeResponse: any, userContext: any) {
                        try {
                            return getResult.getProfileInfo(authCodeResponse, userContext);
                        } catch (err) {
                            console.log(err);
                            throw err;
                        }
                    }
                }
            }

        },
    ],
});

Yes, give me a sec

no. Use your values

Maybe I'm doing something wrong, but there is none

Can you enable debug logs and show me the out of that when you are making the API call?

Yes, it sends a 200, but the content is a field_error

oh right yea.

Oh, yes, let me try that

it's annoying cause the auth providers barely give any info about why the request failed. It's just "request failed with status code 401"

are you providing the scope array yourself on the backend?

No,

ts
export class SupertokensService {
  public axiosInstance: AxiosInstance;

  constructor() {
    SuperTokens.init({
      apiDomain: environment.apiServerAddress,
      apiBasePath: '/auth',
    });

    this.axiosInstance = axios.create({
      baseURL: environment.apiServerAddress,
      timeout: 10000,
    });
    SuperTokens.addAxiosInterceptors(this.axiosInstance);
  }

  public async thirdPartyRedirect(provider: string) {
    const intialResponse = await this.axiosInstance.request({
      url: `/auth/authorisationurl?thirdPartyId=${provider}`,
      method: 'GET',
      headers: {
        rid: 'thirdpartyemailpassword'
      }
    });
    if (intialResponse.status !== 200 || intialResponse.data.status !== 'OK') throw new Error('Failed to get auth url');

    const authUrl = intialResponse.data.url;
    const urlObj = new URL(authUrl);

    urlObj.searchParams.append('redirect_uri', `${environment.currentAddress}/auth/callback/${provider}`);

    const url = urlObj.toString();
    window.location.href = url;
  }

  public async login(provider: string, code: string) {
    const response = await this.axiosInstance.post(
      '/auth/signinup',
      {
        code,
        redirectURI: `${environment.currentAddress}/auth/callback/${provider}`,
        thirdPartyId: provider,
        authCodeResponse: {
          access_token: 'string',
          id_token: 'string'
        },
      },
      {
        headers: {
          'rid': 'thirdpartyemailpassword'
        }
      }
    );
    console.log(response);
  }
}

no i mean on the backend

No, there are no scopes

Also, you should remove:

authCodeResponse: {
          access_token: 'string',
          id_token: 'string'
        },

Ok, I removed it

does it work now?

No, but I put some console.logs in the backend

ok great!

The client still receives a 401 response...

Now can you remove all the code that i gave on the backend and add the original backend code back?

Yes, give me a second

Huh.. maybe you have a limit on the size of the headers that are allowed to be sent back?

Yeah, it was more than 1kb 🤣 But it works now, and it was definitely that missing

/auth

hehe. no worries 🙂

It would have taken an eternity to figure it out on my own

well.. we are working on a vanilla JS SDK which will expose help functions instead of you having to make the API calls yourself. That would have really helped in this case.

Well, I'm looking forward to it 🙂