Strapi v4 unable to use Google Provider

Community Packages Providers
1

I’m trying to set up the Google provider in my Strapi v4 backend. The provider settings are successfully updated, however, when I’m trying to make a Postman request to http://localhost:1337/api/auth/google/callback?access_token=mytoken it gives the following error:

image
image1880×918 128 KB

The same call to a v3 Strapi instance works completely fine
http://localhost:1338/auth/google/callback?access_token=mytoken

2

Would that not be without /api
Because it seems your trying to access an api to authenticate, but how do you authenticate if that route needs authentication? Just a thought

3

When I try without /api, it returns a 404 Not Found error.

This is what the callback route is from Public role settings. This route is uchecked for Authenticated user.
image

4

If you do figure it out, can you please post the solution ?
I am stuck on this integration for last two days. Trying nextjs + nextauth + strapi with google auth.

Getting google auth callback correctly to Strapi. Strapi generates a token for this and calls the frontend nextjs app at http://localhost:3000/api/auth/google/callback?id_token={token}

I am caputuring this token in /api/auth/[…nextauth].ts and calling strapi at http://localhost:1337/api/auth/google/callback?access_token={accessToken}

Strapi returns 401… Unauthorized… Did some research… looks like it is unable to parse the token sent back. Is the procedure correct? Is the ‘id_token’ query_param sent by Strapi’s get request to frontend end url be processed by the client in any way?

If someone has working example of using next-auth with strapi and google provider it will help a a lot.

Thanks and regards,
Manjunath Kaliyur

5

Strapi V4 with google providers is not working for sure. Tried the strapi-examples with react-login without change and it is broken too.

Did some more digging and logging. For some resaon the token sent to frontend app is not parsable by Strapi if the token is sent back as auth_token… Getting the errors below. Token is being thrown our with “Invalid algorithm” error… The logs below were added for debugging by me in node_modules folder for testing.

KGM inside verify of jsonwebtoken :: decodedToken exists!
KGM verify of jsonwebtoken : decodedToken.header.alg is == RS256
[2021-12-25 00:57:27.027] info: IndexOf
[2021-12-25 00:57:27.027] info: 0
[2021-12-25 00:57:27.027] info: about to reject - Invalid token err
[2021-12-25 00:57:27.027] info: {“name”:“JsonWebTokenError”,“message”:“invalid algorithm”}

Guess this need inputs from Strapi V4 team. If there is a tested V4 with Google Auth example that would help. The example in repository (Login-React) is also broken.

Regards
M

1 Like
6

Same error for me, getting the error when calling the callback

7

for 4.3.x version, it works for me after installing strapi google oauth plugin

8

Has anyone been able to solve it?

9

I’m also having an issue around this, has anyone had any luck?

10

For the token at the step [http://localhost:3000/api/auth/google/callback?id_token={token} ].
I get token and then i apply parseJwt as bellow function:


function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
}

parseJwt(token); // token here is value of param id_token

I get the results as below:

{
      aud: "39uj1.apps.googleusercontent.com"
      azp: "395913j9uj1.apps.googleusercontent.com"
      email: "your mail"
      email_verified: true
      exp: 1714199643
      hd: "hn"
      iat: 1714196043
      iss: "https://accounts.google.com"
      sub: "1071
}

I can get the userinfo here. And when i fetch
http://localhost:1337/api/auth/google/callback?access_token={accessToken}

i get the results

    "jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwiaWF0IjoxNzE0MTk3OTE1LCJleHAiOjE3MTY3ODk5MTV9.-ntGfNFWUHw2j91Itb-GfE54RZ8cA4lxVjm8r75Xa8w",
    "user": {
        "id": 4,
...
}

Im not sure, but in my case i can get the user information.