Google OAuth - Where to Store Client ID

user_279516 0
Viewed 1696

I followed this link to allow my users to authenticate via google:
https://dev.to/jorgecf/integrating-google-authentication-with-your-angular-app-4j2a

However, I have to have my Google Client ID in my UI code:

return pload.then(async () => {
  await gapi.auth2
    .init({ client_id: 'abc123' })  // Put my client ID here. How should I store this?
    .then(auth => {
      this.gapiSetup = true;
      this.authInstance = auth;
    });
});

Is that a security issue? If so, where/how would I store that?

angular typescript oauth-2.0 google-oauth
2 Answers

I received similar questions so I think is a valid question.

Oauth2 flow needs the client_id int the browser, so is not a security issue.

Why? : Because that's how it's defined the OAUTH2 SPECIFICATION

Why client_id is required?

Your angular code needs the client_id to generate the auth url and then perform a redirection to that url. No matter the oauth2 provider (google, facebook, etc), that url has the following syntax:

https://auth.acme.com/auth?response_type=code&redirect_uri=https://myweb.com/callback&client_id=******

Note redirect_uri and client_id fields.

This auth url is responsible to show the login form, receive the credentials and perform the redirection to redirect_uri sending the code value

What would be an issue?

To have the secret in your frontend(angular) woull be the security issue.

This secret must be used together with client id and another fields to retrieve the access_token in your case from google. This token will permit you consume google apis (drive, map, etc) if you have the correct permissions.

This flow must be in your backend

How partial hide it?

Create the auth url in your backend and return it to your frontend with a 302 http code. Browser will perform a instantaneous redirection.

I said partial, because a curious budy could stop the redirection (esc key) or use the browser console and view your auth url which contains the client_id field

Feel free to use this room https://chat.stackoverflow.com/rooms/215054/oauth2-budy to ask another questions related to oauth2

user_39577540

The option I've always used is to deploy a configuration file with your web static content, and include Public Open Id Connect Settings in it.

Here is an example configuration file from a code sample of mine. Of course, there is no way anyone can get tokens based on this information - you need valid credentials in addition.

Often components such as UIs and APIs are pushed down a pipeline:

  • DEV
  • QA
  • STAGING
  • PRODUCTION

Your continuous delivery process can deal with delivering different settings to each stage of the pipeline. Your code is then clean and never includes any hard coded values.

user_90198850
Related