Nuxt.js: use nuxt with firebase together

[leftjs]

I wanna use firebase with nuxt to build static page, however, I have some trouble about this, can you give me a boilerplate like https://github.com/nuxt/example-auth0, use auth0 to auth will be the best. thanks

_{This question is available on Nuxt.js community (#c266)}

[stursby]

Hey @leftjs, by saying "use Firebase with Nuxt to build a static page" do you mean you'll eventually run nuxt generate(docs) to build a static site?

Also, you mention wanting to use Auth0... why not just use Firebase's built in Auth system? Firebase Auth works seamlessly with Firebase, unless you specifically need Auth0.

[leftjs]

thanks @stursby , simple SPA, I want to deploy github.io. so nuxt generate will be the best. I have seen your PR about using firebase with nuxt , yes, we can use rest api to access realtime database of firebase, but if I want to make my data more safety, should I need to configure firebase realtime database rule like this

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

if I wanna use this rule, I should use firebase authentication sdk for web. However, I didn't find any access token generated by firebase using below code:

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

so I wanna use auth0 to manage my user auth, because it can give me access token and exchange token that generated by using delegation endpoint. save these toke, I can resume my user status. Do you have any more advice ?

[stursby]

@leftjs I've found the best way is to first call the onAuthStateChanged method.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in. Show Sign in methods or Auth anonymously 
  }
});

[stursby]

@leftjs Here's a quick demo using Vue and Firebase together with Firebase Auth. You can easily apply these methods to Nuxt.js (but it you're going for a static site, you _might_ not need Nuxt)

https://gist.github.com/stursby/73d85379717f22cc52fe3993408da0dd

And here’s a live DEMO

I've just used the Google provider for the sake of simplicity.

And here are my Firebase Database rules:

You’ll notice now users can only .read and .write if they are authenticated and can only access _their own_ items. ($uid is a wildcard which maps to https://simple-auth-demo.firebaseio.com/items/<USER_UID>/)

{
  "rules": {
    "items": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}

[leftjs]

ok @stursby thank u very much. using $uid is very useful method, also simplify my static page without auth0. What's more, I can using rest url like https://simple-auth-demo.firebaseio.com/items/<USER_UID>.json to fix with nuxt if I want to use ssr :-)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.