Local Nuxt 3 - Firebase signInWithRedirect

#nuxt #firebase #signinwithredirect

I decided to write this article as it took a few days to wrap my head around and fix the issue.

The requirement

You want to create your app with firebase auth using the signInWithRedirect method so that you have a good experience in mobile and desktop.

The problem

With new strict rules placed by the browsers, when you try to develop using localhost Google OAuth doesn't want to play nice.

After nearly exhausting my google skills I found some small threads of information that led me to a working solution that I will describe here.

The Solution

Disclaimer: If you are reading this, I assume you have a working firebase config and setup and just want to make sure auth works.

Nuxt Config - Route Rules
- Go to your Firebase config and add a new route rule for proxying the requests from your localhost to the firebase app domain.

  ...
    routeRules: {
      '/__/auth/**': {
        proxy: 'https://<your-app-domain>.firebaseapp.com/__/auth/**'
      }
    },
  ...

Firebase Config
- Change the authDomain in your firebaseConfig to your localhost address where the development server will run eg.: authDomain: 'localhost:3000'
Package.json
- Update the dev script to include the https flag for nuxt development with a self signed certificate.

...
  "scripts": {
      "dev": "nuxt dev --https",
...

Google Cloud Console config
- Do not be afraid of going into Cloud Console. I now the benefit of using firebase is so you don't have to get into the guts of google cloud, however as far as I know this configuration is not made available in firebase console.
- Go to Google API Console Credentials page. make sure to have the correct Project selected.
- Look for the section titled OAuth 2.0 Client IDs and click the Web client entry as shown in the screenshot
- Scroll down to Authorized Redirect URIs and add your localhost url with the HTTPS protocol as shown in the screenshot and save. * Make sure the adjust the port as necessary based on your setup

Restart project

Once you have completed all of the necessary changes you should be able to restart your nuxt app by typing yarn dev (or use the pkg mngr of your choice), accept the browser warning due to using the self signed cert