OAuth Setup for local development

This guide walks you through setting up Google OAuth for local development in a project that uses Vue 3 with Vite on the frontend and Node.js on the backend.

---

1. .env File (Frontend)

Create a .env file at the root of your project (same level as vite.config.js) and add:

VITE_GOOGLE_APP_CLIENT_ID=265xxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
JWT_SECRET=xxxxxxxxx

• Replace the xxxxxxxx... part with your actual Google OAuth Client ID.
• JWT_SECRET is used for signing backend-generated JWTs. Keep it safe. (Get it online )

✅ Make sure .env is included in .gitignore.

---

2. Configure Google OAuth in Google Cloud Console

1. Visit: https://console.cloud.google.com/

2. Navigate to APIs & Services > Credentials

3. Click Create Credentials → OAuth Client ID

4. Select Web application

5. Under Authorized JavaScript origins, add authorized URIs

6. Under Authorized redirect URIs match the redirect URL you handle in your app.

7. Click Create. Copy the Client ID and paste it into your .env file.

---

3. Tips for Local Development

• Restart vercel dev after editing .env.
• Make sure your CORS settings allow localhost:3000 on the backend.
• Don’t forget to secure your API endpoints.

---

References

• Google Identity Docs
• vue3-google-login on npm
• google-auth-library on Node.js