Google OAuth Provider Issue

[JeffWeim]

Node.js version:
9.11.1

npm version:
5.4.2

Strapi version:
3.0.0-alpha.11.3

Operating system:
MacOS

Which example is causing problem?
good-old-react-authentication-flow

Do you want to request a feature or report a bug?
report a bug

What is the current behavior?
After enabling Google as an OAuth provider in the Strapi admin, I attempt to use the provider for a login. I click the Google button and in the client receive this message: {"message":"An internal server error occurred","statusCode":500,"error":"Internal Server Error"}. Looking at the server output the only error I'm seeing is simply: error undefined is not a function along with the GET request

If the current behavior is a bug, please provide the steps to reproduce the problem

1. In the admin, enable Google as an OAuth Provider
2. Input your client ID and client secret
3. Leave The redirect URL to your front-end app and The redirect URL to add in your Google application configurations as is
4. return to the client and go to /auth/login
5. Attempt a login with Google

An additional note is that after configuring the Provider settings correctly, I was able to reach the Google account selection page. However, I am now only receiving the {"message":"An internal server error occurred","statusCode":500,"error":"Internal Server Error"} error in the client

What is the expected behavior?
Go to Google account selection, be returned to logged in state within the app

[JeffWeim]

@soupette

First, I've found that the issue was simply not having the Google+ API enable. I feel like for the development env, there needs to be much better debug messaging enabled. This was a simple issue to fix, but there was nothing indicating what needed to happen.

Second, I'm now receiving another message in the client. It is happening on the redirect back from Google to the app. The message reads:

{
   "jwt":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNTIzNjQwNjYyLCJleHAiOjE1MjYyMzI2NjJ9.Lp0bELpbJaYqSC6YSj1PNIyXHzYWVhvF4GrDxAiItJY",
   "user":{
      "id":3,
      "username":"email@here.com",
      "email":"email@here.com",
      "provider":"google",
      "role":{
         "id":3,
         "name":"Public",
         "description":"Default role given to unauthenticated user.",
         "type":"public"
      },
      "updated_at":null,
      "created_at":null
   }
}

I'm not sure why at this point the client isn't returning to the app (I'd expect it to be going to http://localhost:3000/) in a logged-in state. Instead the url is pointing to: http://localhost:1337/auth/google/callback?access_token=...

[soupette]

I think that you'll find answer in this documentation.

Let me know if you're still struggling

[JeffWeim]

@soupette

If I follow the steps in those docs, I'm continually redirected back to Google account selection page (ie https://accounts.google.com/signin/oauth/oauthchooseaccount...)

I'm confused as to why in the docs for the "The redirect URL to your front-end app" section it says to use connect/google, while the default value in the admin is auth/google/callback.

Neither of the values seem to work

Also, I'm pretty sure the base url used for "The redirect URL to your front-end app" is wrong. In the docs it is http://locahost:3000/... (strapi.remoteURL) while in the admin it's configured to http://localhost:1337/... (strapi.backendURL). Which one is correct?

my default admin settings:

[soupette]

If you're using the boilerplate provided in the examples it's http://locahost:3000/connect/google.

You're right, the url writtent in the admin is wrong but if you click on the field you'll see that it will automatically change to auth/google/callback so you need to edit this field in the admin.

[JeffWeim]

I am using the boilerplate provider, which uses http://locahost:3000/ and that seems all good.

What I am saying, is that the Strapi admin code running at http://locahost:1337/ is in fact using this exact same base url for the "The redirect URL to your front-end app" section. I can click to change the auth/google/callback portion, but that is not the problem. The problem is base url for this section is in fact http://locahost:1337/ and not http://locahost:3000/ as you mentioned it should be (and this cannot be changed):

This is a screenshot from my local development admin server:

Beyond this issue, I don't understand why there is a feature in the admin to prevent a admin from changing the base url (unless it's not a feature...)? It is very likely other developers will not be developing at http://locahost:3000/ and would want to change this.

[soupette]

Well the redirect URL of your front-end app can be changed, However the one that manages the authentication between your api and your provider cannot be modified since it's dynamic, so if you change the port of your API the field will also be updated

[JeffWeim]

Hmm alright. So how is it in this documentation you were able to set both http://locahost:3000 and http://localhost:1337?

This is what I'm most confused about.

[nabiltkarim]

@JeffWeim facing the same issues here while trying to integrating it with my strapi admin. Any clues as to what values you put as redirect URL in your provider?

[pronvd7]

you need to make google process firstly from frontend app after that response add to the strapi backend server