racavi
commented
1 month ago Hello @JimNayzium ,
Thank you for giving a try to this repo!
TL; DR;
First of all, this repo is just half of the equation. It's assumed that you have a running instance of google-oauth2-express-server and that it is accessible from this google-oauth2-sveltekit-client web application via networking (TCP, IP, DNS).
google-oauth2-sveltekit-client
Create the file app/.env (it must be sibling of package.json) and enter the following:
CREDENTIALS_COOKIE_NAME=foo
BACKEND_GOOGLE_GET_AUTHORIZATION_URL=http://localhost:3000/api/v1/authz/google/authz-urlgoogle-oauth2-express-server
The latter environment variables must be provided to the backend (google-oauth2-express-server) in order let it use them while operating. You are also expected to create an app/.env file to supply the following values:
GOOGLE_CLIENT_ID=MY_GOOGLE_ID_URL_HERE.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=MY_CLIENT_SECRET
GOOGLE_REDIRECT_URI=http://localhost:5173/api/v1/auth/google/oauth2callbackTrivia
I am a bit confused as to what I put in the /static/private values for
Don't worry: The /static/private 'thing' is SvelteKit notation its used to inject private environment variables values into your application to later user them in your running instance. You are only expected to provide each application/repo with a .env file of your own. This .env file is expected to live within each repo app/ subdirectory. Whenever every value is OK, the system will be operational ;-)
Are these what you mean? Please let me know and feel free to make fun of my dumb a**! 😄
GOOGLE_CLIENT_ID=MY_GOOGLE_ID_URL_HERE.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=MY_CLIENT_SECRET GOOGLE_REDIRECT_URI=http://local.development.com/api/login/google/callback
GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET are both taken from your Google Cloud Credentials Page (Create credentials > OAuth client ID)
GOOGLE_CLIENT_ID
MY_GOOGLE_ID_URL_HERE: Take the value from your "Google Cloud Credentials Page / OAuth 2.0 Client ID / YOUR_CLIENT / CLIENT_ID"
GOOGLE_CLIENT_SECRET
MY_CLIENT_SECRET: Take the value from your "Google Cloud Credentials Page / OAuth 2.0 Client ID / YOUR_CLIENT / Client Secrets"
GOOGLE_REDIRECT_URI
The last one is a little trickier =)
Refers to this system public API endpoint URL responsible of handling Google OAuth2 authorization response (Step 4: Handle the OAuth 2.0 server response).
As the backend can run on other network or in an public blocked port by a firewall, it's this google-oauth2-sveltekit-client the application that will be acting as the public face of the system thus serving as a front end web application.
This SvelteKit application uses routes to pages alongside API routes. One of such API routes is the one that Google will invoke after the OAuth2 flow handshake whether the user accepts or rejects the scopes prompted by our system.
As the frontend is merely a kind face to the public and delegates the business logic to the backend, when it is necessary integrating with external systems an API route is exposed to act as a bridge between the public internet and the backend.
So that you must forge this value with your frontend hostname (by default http://localhost:5173) appending the oauth2callback API route (by default: /api/v1/auth/google/oauth2callback living at app/src/routes/). That will give you: http://localhost:5173/api/v1/auth/google/oauth2callback
Tips
- Ensure that you have whitelisted the value of GOOGLE_REDIRECT_URI within your Google Cloud Credentials Page / OAuth 2.0 Client ID / YOUR_CLIENT / Authorized redirection URIs
- Ensure that you have whitelisted the value of your frontend hostname within your Google Cloud Credentials Page / OAuth 2.0 Client ID / YOUR_CLIENT / JS authorized origins
http://localhostis supported on both (Authorized redirection URIs & JS authorized origins) for development purposes.http://local.development.com: Is this URL publicly reachable from outside your SOHO? If it is a domain name handled by your auto-managed private DNS server living inside your LAN it won't work.
Hope to have helped you and you get the system running. Anyway, don't hesitate, I'll always try give a hand when possible ;-)
I am a bit confused as to what I put in the /static/private values for
CREDENTIALS_COOKIE_NAME, BACKEND_GOOGLE_GET_AUTHORIZATION_URL
And obviously the names make it self explanatory, but I apologize for being such an idiot and not knowing what to do? hahaha. I have pulled my hair out looking for the simple equivalent in sveltekit for how to do the simplest of google logins like I do with PHP and Laravel and just feel so dumb!
Your github felt like the simplest way home, but I got stuck here.
Are these what you mean? Please let me know and feel free to make fun of my dumb a**! 😄
GOOGLE_CLIENT_ID=MY_GOOGLE_ID_URL_HERE.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=MY_CLIENT_SECRET GOOGLE_REDIRECT_URI=http://local.development.com/api/login/google/callback