Search code examples
angulartypescriptoauth-2.0google-oauth

Google OAuth - Where to Store Client ID

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?

Solution

  • Straight to the point

    You could store it anywhere in your web, usually using javascript.

    Detailed explanation

    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 redirect the user to the login form (google, facebook, microsoft, etc), then receive the credentials and perform the redirection (back to your web) to redirect_uri sending the code value

    This flow is called Oauth2 Authorization Code Flow/Grant. More details here: https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow

    What would be an issue?

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

    The client_secret and client_id with another fields are required to retrieve the access_token in your case from google. This token will allow you to consume apis (drive, map, etc) if you have the correct permissions.

    This exchange must be in your backend not in the frontend!!

    More details here about how to get the access_token using client_di, client_secret and auth_code

    https://help.akana.com/content/current/cm/api_oauth/oauth_oauth20/m_oauth20_getTokenPOST.htm

    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 buddy could stop the redirection (esc key) or use the browser console and view your auth url which contains the client_id field

    Where to store the client_id ?

    Finally, if you understood that the visibility of client_id is not a problem, you could store anywhere in your frontend:

    • Global javascript variable (before SPA transpilation)
    • Html templating (SSR)

    Finally you will need the full auth url (once during the user session), not only the client_id. So instead to build the auth url in the frontend, you could create it somewhere in your backend and then retrieve it in the frontend. Sample

    GET /v1/authorize/url

    Where to store the access_token ?

    Similar case of client_id. We can store it anywhere in the web. Due this value will be required constantly to consume the web services, rest api or microservices, usually is stored in:

    And same apply to the mobiles:

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