Google Oauth Error: redirect_uri_mismatch

Question

I'm trying to use google Oauth 2 to authenticate with google calendar API for a web server running on AWS EC2.

When I generated the credentials I selected 'OAuth Client ID' and then 'Web Application'. For the Authorised redirect URIs I have entered:

http://ec2-XX-XX-XX-XXX.eu-west-1.compute.amazonaws.com (I've blanked out the IP of my EC2 instance). I have checked this is the correct URL that I want the callback to go to.

The link that is generated in the server logs is of the form:

https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=XXXXXXXXXXXX-XXXXXXXXXXXXXX.apps.googleusercontent.com&redirect_uri=http://localhost:47258/Callback&response_type=code&scope=https://www.googleapis.com/auth/calendar.readonly

When I follow the link I get the error 'Error: redirect_uri_mismatch'.

I've read this SO question and have checked that I am using HTTP and there is no trialing '/'

I suspect that the URL generated should not have 'localhost' in it but I've reset the client_secret.json several times and each time I restart tomcat with the new client secret I still get a link with localhost but just over a different port.

Locally, I had selected Credentials type of 'other' previously and was not given an option for the Authorised redirect URI. I did try this for the EC2 instance but this won't give me the control I want over the redirect URI and sends the redirect over localhost.

Answer 1

In case you are seeing this error while making API call from your server to get tokens.

Short Answer ? - What solved my problem

use string postmessage in place of actual redirectUri that you configured on cloud console.

Here is my initilization of OAuth2 client that worked for me.

// import {Auth, google} from 'googleapis`;

const clientID = process.env.GOOGLE_OAUTH_CLIENT_ID;
const clientSecret = process.env.GOOGLE_OAUTH_CLIENT_SECRET;
oauthClient = new google.auth.OAuth2(clientID,clientSecret,'postmessage');

My Case

On the frontend, I am using react to prompt the user for login with google with the authentication-code flow. On success, this returns code in the payload that needs to be posted to the google API server to get token - Access Token, Refresh Token, ID Token etc.

I am using googleapis package on my server. Here is how I am retrieving user info from google

// import {Auth, google} from 'googleapis`;

const clientID = process.env.GOOGLE_OAUTH_CLIENT_ID;
const clientSecret = process.env.GOOGLE_OAUTH_CLIENT_SECRET;
oauthClient = new google.auth.OAuth2(clientID,clientSecret,'postmessage');

/*
    get tokens from google to make api calls on behalf of user.
    @param: code -> code posted to backend from the frontend after the user successfully grant access from consent screen
*/
const handleGoogleAuth = (code: string) => {
    oauthClient.getToken(code, async (err, tokens: Auth.Credentials) {
        if (err) throw new Error()

        // get user information
        const tokenInfo = await oauthClient.verifyIdToken({
          idToken: tokens.id_token
        });
    
        const {email, given_name, family_name, email} = tokenInfo.getPayload();
        // do whatever you want to do with user informaton
    }
}

Answer 2

When creating a Oath client ID, DO NOT select web application, Select "Other". This way, the Redirect URI is not required.

Answer 3

Unfortunately, it's quite hard to give you a conclusive answer with the details you provided.

We know that you are trying to access something that's undefined. Are you sure guild is properly passed to your function and have you checked if your fetching of member works properly?

Best regards

Answer 4

I would do something like this (if you have message defined):

const role = message.guild.roles.cache.get(r => r.I’d ==='924064535663480922');