Feathers js - how to login by google

Question

I am following the doc to create google strategy.

When I access http://localhost:3030/oauth/google through browser, below error occurs:

Error Code 400： redirect_uri_mismatch
The redirect URI in the request, https://localhost/oauth/google/callback, 
does not match the ones authorized for the OAuth client. 
To update the authorized redirect URIs, visit: https://console.developers.google.com/apis/credentials/oauthclient/12345678-xxxx.apps.googleusercontent.com?project=xxxxyyyy

authentication.js

const { AuthenticationService, AuthenticationBaseStrategy, JWTStrategy } = require('@feathersjs/authentication');
const { LocalStrategy } = require('@feathersjs/authentication-local');
const { expressOauth } = require('@feathersjs/authentication-oauth');

const axios = require('axios');
const { OAuthStrategy } = require('@feathersjs/authentication-oauth');

class GoogleStrategy extends OAuthStrategy {
  async getEntityData(profile) {
    const baseData = await super.getEntityData(profile);
    // this will grab the picture and email address of the Google profile
    return {
      ...baseData,
      email: profile.email
    };
  }
}

module.exports = app => {
  const authentication = new AuthenticationService(app);

  authentication.register('jwt', new JWTStrategy());
  authentication.register('local', new LocalStrategy());
  authentication.register('google', new GoogleStrategy());
 
  app.use('/authentication', authentication);
  app.configure(expressOauth());
};

config/local.json

{
    "authentication": {
      "entity": "user",
      "service": "users",
      "secret": "SA3c59SscyH6TscABCdeFG=",
      "authStrategies": [
        "jwt",
        "local",
        "google"
      ],
      "jwtOptions": {
        "header": {
          "typ": "access"
        },
        "audience": "https://yourdomain.com",
        "issuer": "feathers",
        "algorithm": "HS256",
        "expiresIn": "1d"
      },
      "local": {
        "usernameField": "email",
        "passwordField": "password"
      },
      "oauth": {
        "google": {
          "key": "xxx.apps.googleusercontent.com",
          "secret": "ASDFGgh"
        }
      }
    },
}

Update 1
Fixed issue by adding https://localhost/oauth/google/callback in Authorized redirect URIs .

Now the website redirect to Select Account Page.

After I click my account, the website is redirected to https://localhost/oauth/google/callback?code=4/abcd-xxx-xxxxx-xxx&scope=email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20openid&authuser=0&hd=myDomain.com&prompt=consent

Update 2

Updated local.json and add redirect_uri field

      "oauth": {
        "redirect": "/",
        "google": {
          "redirect_uri": "http://localhost:3030/auth/google/callback", // add here
          "key": "abcd.googleusercontent.com",
          "secret": "xxxx",
          "scope": [
            "email",
            "profile",
            "openid"
          ],
          "nonce": true
        }
      }

It can now redirect to http://localhost:3030/auth/google/callback?code=xxx&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=0&hd=myDomain.com&prompt=consent#

It shows 404 Page Not Find instead of redirecting to /

Update 3
Now the website redirects to https://localhost/oauth/google/authenticate# , I know it should be https://localhost:3030/oauth/google/authenticate , but I don't know how and where Feather/Google Cloud Platform can set it

Update 4
Finally successfully redirecting to www.google.com#error=Field%20password%20does%20not%20exist.%20(required) , is it kind of an error?

    "oauth": {
      "redirect": "www.google.com",
      "google": {
        "key": "<Google OAuth key>",
        "secret": "<Google OAuth secret>",
        "scope": [
          "email",
          "profile",
          "openid"
        ],
        "nonce": true,
        "redirect_uri": "http://localhost:3030/oauth/google/callback",
        "callback": "/oauth/google/authenticate"
      }
    }

Answer 1

Issue number one redirect uri

Redirect URI must exactly match the location you are sending

Your app is sending

https://localhost/oauth/google/callback

You have only added the following as a valid redirect uri

http://localhost:3030/auth/google/callback

The solution is to take https://localhost/oauth/google/callback and add it as a valid redirect uri in Google Developer console.

issue number two.

Site cannot be reached.

Your application has told google that you are preparted to respond to the authorization code form the authorization server at the following endpoint

https://localhost/oauth/google/callback?code=4/abcd-xxx-xxxxx-xxx&scope=email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20openid&authuser=0&hd=myDomain.com&prompt=consent

Your site does not appear to be able to handle that response. I would check that the callback file exists.