Error after generating a token in a js chrome extension and then trying to verify it on a backend nodejs server

[KolCrooks]

I am trying to generate a token in a chrome extension and then use it to verify requests to the backend server. I have been successful at generating a token in the front end but when I send it to the backend and verify it with this library but always get the error Error: Wrong number of segments in token: [TOKEN_HERE].

I have tried to find out how to fix it online and nothing that I have found works. The ID of my extension is the same as the ID in the console.

I created a chrome extension application in the developer console and added this to my manifest:

"oauth2": {
    "client_id": "THE ID",
    "scopes":["https://www.googleapis.com/auth/classroom.topics.readonly", "https://www.googleapis.com/auth/classroom.topics","https://www.googleapis.com/auth/classroom.courses.readonly", "https://www.googleapis.com/auth/classroom.rosters.readonly", "https://www.googleapis.com/auth/classroom.student-submissions.me.readonly"]
  },
...
"permissions": [
    "identity",
],

Once I ran the code

chrome.identity.getAuthToken({interactive: true}, function(token) {
    console.log(token);
});

It generates a token that I was able to validate in the extension with:

var x = new XMLHttpRequest();
x.open('GET', 'https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=' + token);

This also generated a new oAuth2 client in my console that is a web application:

On the backend nodejs server I tried using both of the generated IDs to verify the token. The extension application doesn't have a client secret but the webapp does. I have tried using the secret with the webserver id but this didn't work either.

This the code for the backend verification:

const { OAuth2Client } = require('google-auth-library');
const authClient = new OAuth2Client(CLIENT_ID);

async function verify(token) {
  const ticket = await authClient.verifyIdToken({
      idToken: token,
      audience: [CLIENT_ID]  // Specify the CLIENT_ID of the app that accesses the backend
      // Or, if multiple clients access the backend:
      //[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3]
  });
    const payload = ticket.getPayload();
    return {
        domain: payload['hd'],
        userid: payload['sub']
    }
}

I want to verify the token with this code but it is unable to do so. Every time I use the token that is verifiable with the xhr request it just gives me the error Error: Wrong number of segments in token. I have no clue where to go from here as documentation is a bit scarce. All help is appreciated!

EDIT: I have also tried to validate the token with the Bearer prefix it didn't work.

[KolCrooks]

I figured out part of the problem! the extension gives me an access token and the problem is that I am trying to validate it as an ID token. Now I just need to figure out how to get an ID token with a chrome extension. This no longer pertains to this library so I will close the issue. I will update with my solution later though.

[KolCrooks]

@JustinBeckwith Hey Justin. I'm not really sure why I was assigned this issue. I updated a while ago that this was a problem not with this library, but with the method that I used to get the token. If you need me to add anything I can do so but this problem is from a long time ago and I am not sure if I even have the code.

[bolds07]

@KolCrooks ,

Did you manage to solve it? how did you obtain the id token from access token?

[athrvk]

Hi @KolCrooks

did you get to it work ?

[Raza723]

Could someone please help me with this?