"Failed to authenticate." Error while trying to use "client.users.authViaOAuth2"

[SendHelpICannotCode]

Hi guys,

I am currently using nextjs and react with pocketbase and when I try to authenticate via OAuth2, I get a code 400 response "Failed to authenticate.".

I am unfortunately unable to determine why this error is occurring. Maybe someone of you can give me a hint.

First I collect the authProviders:

export async function getStaticProps() {
  const authProviders = (await client.users.listAuthMethods()).authProviders;

  return {
    props: {authProviders}, // will be passed to the page component as props
  }
}

I then iterate through these:

const providersMap = authProviders.authProviders.sort((a, b) => b.name.localeCompare(a.name)).map(provider => {

and create a button per authProvider that calls the following function via onClick:

signInWithOAuth2(provider.name, provider.codeChallenge, provider.codeVerifier, 'http://localhost:3000/')

this method then looks like this:

// Sign in with OAuth2 via redirect (google, github, discord).
export const signInWithOAuth2 = async (name: string, code: string, verifier: string, redirectURL: string) => {
  await client.users.authViaOAuth2(name, code, verifier, redirectURL).then(() => {
    setNavigationProgress(50);
    fetch("api/auth/login", {
      method: "post",
      headers: {
        }, "content-type": "application/json",
      },
      body: JSON.stringify({ cookieString: client.authStore.exportToCookie({ httpOnly: true }) }),
    })
    .then(() => {
      setNavigationProgress(100);
      showNotification({
        id: 'login-successful',
        autoClose: 5000,
        message: 'login-successful',
        color: 'teal',
        icon: <IconCheck size={18}/>,
      });
      router.push('/');
    });
  })
  .catch((error) => {
    console.log(error.data);
    const errorMessage = error.message;
    showNotification({
      id: 'oauth2-failed',
      autoClose: 5000,
      title: 'Login failed',
      message: errorMessage || sthWentWrong,
      color: 'red',
      icon: <iconX size={18}/>,
    });
  });
}

From the provider I have the attributes "codeChallenge", "codeChallengeMethod", "codeVerifier", "name", "state" and "authUrl" to choose from. Am I using these incorrectly?

The documentation only talks about a parameter called code and not codeChallenge:

import PocketBase from 'pocketbase';

const client = new PocketBase('http://127.0.0.1:8090');

...

const authData = await client.users.authViaOAuth2('google', 'CODE', 'VERIFIER', 'REDIRECT_URL');

I hope you could understand my problem so far and have a solution or hints for me :)

[ganigeorgiev]

How do you construct the "Login with ..." link?

In any case, you could find a web OAuth2 integration example in the "Auth via OAuth2" section of https://pocketbase.io/docs/manage-users/#auth-via-oauth2.

If you are still having difficulties, let me know and I'll reopen the issue.

Please note, that this will be simplified in the future per #pocketbase/pocketbase#55.

[ggenilson]

I'm getting the same issue, any solution?

[ganigeorgiev]

@ggenilson There is not enough information to help you debug it.

Try to copy-paste the plain JS example from https://pocketbase.io/docs/authentication/#web-oauth2-integration and compare it to your implementation or if possible provide a minimal reproducible repo.

You can also start PocketBase with --debug to get more detailed error messages in the console since it could be caused by incorrectly setup provider OAuth2 app or something related to the scopes.