EmberFire Google Authentication - Review Setup Please

Question

Summary:

I would like to connect an EmberJS application to Firebase via Google login

Versions:

Ember : 3.1.2, Ember Data : 3.1.1, Firebase : 3.9.0

config/environment.js

'use strict';

module.exports = function(environment) {
  let ENV = {
    modulePrefix: 'myApp',
    environment: environment, // : environment,
    rootURL: '/',
    locationType: 'auto',
    firebase: {
      apiKey: "CORRECT_API_KEY",
      authDomain: "CORRECT_DOMAIN.firebaseapp.com", 
      databaseURL: "https://CORRECT_PREFIX.firebaseio.com", 
      projectId: "CORRECT_ID",
      storageBucket: "CORRECT_BUCKET.appspot.com",
      messagingSenderId: "CORRECT_NUMBER"
    },
    torii: {
      sessionServiceName: 'session'
    },
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      },
      EXTEND_PROTOTYPES: {
        // Prevent Ember Data from overriding Date.parse.
        Date: false
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    }
  };

  if (environment === 'development') {
    // ENV.APP.LOG_RESOLVER = true;
    // ENV.APP.LOG_ACTIVE_GENERATION = true;
    // ENV.APP.LOG_TRANSITIONS = true;
    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    // ENV.APP.LOG_VIEW_LOOKUPS = true;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.locationType = 'none';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
    // ENV.APP.autoboot = false;
  }

  if (environment === 'production') {

  }

  return ENV;
};

app/torii-adapters/application.js

import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';

export default ToriiFirebaseAdapter.extend({

});

app/adapters/application.js

import Ember from 'ember';
import FirebaseAdapter from 'emberfire/adapters/firebase';

export default FirebaseAdapter.extend({
  firebase: Ember.inject.service()
});

app/routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
  session: Ember.inject.service(),
  beforeModel: function() {
    return this.get('session').fetch().catch(function() {});
  },
  actions: {
    signIn: function(provider) {
      this.get('session').open('firebase', { provider: provider}).then(function(data) {
        console.log(data.currentUser);
      });
    },
    signOut: function() {
      this.get('session').close();
    }
  }
});

app/templates/login.hbs

{{#if session.currentUser}}
    <div>
        <button class="sign-out" {{action "signOut"}}>Sign Out</button>
    </div>
{{else}}
  <div>
    <button class="auth-as-google"   {{action "signIn" "google" redirect}}>Sign in with Google</button> 
  </div>
{{/if}}

<div class="jumbo">
    <h3>User Data</h3>
    <table class="user-data-table">
        <tr>
            <td class="bold">session.isAuthenticated</td>
            <td class="user-data-is-authenticated">
                {{#if session.isAuthenticated}}
                    {{session.isAuthenticated}}
                {{else}}
                    false
                {{/if}}
            </td>
        </tr>
        {{#if session.currentUser}}
            <tr>
                <td class="bold">session.provider</td>
                <td class="user-data-provider">
                    {{session.provider}}
                </td>
            </tr>
            <tr>
                <td class="bold">session.uid</td>
                <td class="user-data-uid">
                    {{session.uid}}
                </td>
            </tr>
        {{/if}}
    </table>
</div>

Browser error:

Mirage: Your Ember app tried to POST 'https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyAssertion?key=CORRECT_API_KEY', but there was no route defined to handle this request. Define a route that matches this path in your mirage/config.js file. Did you forget to add your namespace?

Console error:

.../app/routes/application.js 32:9 error Unexpected console statement no-console

Question:

Please review and help. I have searched for these errors and tinkered with the Mirage config.js, but not sure if that is necessary (or if I am doing it correctly).

Answer 1

Mirage throws errors for any accessed route that isn't defined in its config. Since you're using the FQDN for firebase, you'll want to add a passthrough at the end of your config.

this.passthrough('https://www.googleapis.com/**');

Answer 2

I came up against the same problem and turns out the fix was simple: Disable Mirage. In your Ember app's config/environment.js, add:

  if (environment === 'development') {
    ENV['ember-cli-mirage'] = {
      enabled: false
    };
  }

And this will stop trying to pass through Mirage.