To the Point
Storing it anywhere within your website is possible, typically done using JavaScript.
In-Depth Explanation
I have encountered similar inquiries before, so I believe it is a valid question.
The Oauth2 flow requires the client_id in the browser, which does not pose a security risk.
Why? Because it is outlined that way in the OAUTH2 SPECIFICATION.
Why is the client_id necessary?
Your Angular code needs the client_id to form the auth url and subsequently redirect to that URL. Regardless of the oauth2 provider (such as Google or Facebook), the URL follows this syntax:
https://auth.acme.com/auth?response_type=code&redirect_uri=https://myweb.com/callback&client_id=******
Note the redirect_uri and client_id fields.
This auth url redirects users to the login form (Google, Facebook, Microsoft, etc.), then collects their credentials and redirects back to your site with the code value at the redirect_uri.
This process is known as Oauth2 Authorization Code Flow/Grant. More information can be found here: https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow
What could be problematic?
Holding the secret on your frontend (Angular) raises security concerns.
The client_secret and client_id, combined with other details, are essential for obtaining the access_token from providers like Google. This token grants access to APIs (Drive, Maps, etc.) if proper permissions are granted.
This exchange should take place on your backend, not in the frontend!
Additional instructions on acquiring the access_token using client_id, client_secret, and auth_code can be found here:
How to Partially Conceal It?
Create the auth url on your backend and return it to your frontend with a 302 http code for immediate redirection by the browser.
It is referred to as partial concealment because a curious individual could halt the redirection (using the escape key) or examine your auth url containing the client_id through the browser console.
Where Should the client_id Be Stored?
If you recognize that the visibility of the client_id is not an issue, feel free to store it anywhere in your frontend:
- Global JavaScript variable (prior to SPA transpilation)
- HTML templating (Server-Side Rendering)
Ultimately, you will require the complete auth url (once per user session), not just the client_id. Therefore, instead of constructing the auth url in the frontend, generate it in your backend and retrieve it in the frontend. Example:
GET /v1/authorize/url
Where to Keep the access_token?
A scenario akin to storing the client_id. The access_token can be stored anywhere online since it's consistently needed to consume web services, REST APIs, or microservices. Common storage locations include:
The same principles apply to mobile platforms:
- Android SharedPreferences: Android save user session
Do not hesitate to join the discussion room for additional OAuth2-related queries.