account Plugin
account
enables simple user management based on Firebase Authentication.
Installation
nextdapp add account
account
plugin requires util and fb plugins as well.
nextdapp add util
nextdapp add fb
conf.js / conf.local.js
The configurations for fb plugin are required.
Firestore Rules
The user data will be automatically saved and updated to /users/{uid}
document in Firestore when a user logs in. Depending on your needs, you may want to use the Firestore rules like this.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{uid} {
allow read: if true;
allow write: if request.auth.uid == uid;
}
}
}
Global States
user
The user data is set to user
global state when the user is logged in. The data fields are generalized with simple keys. Some fields may be missing depending on the login method.
name
: name of the userimage
: avatar imageabout
: user descriptionid
: an unique id (usually numeric) for the service providerusername
: username used for the service provideruid
: Firebase Authentication unique user id, Useuid
to access the user data in Firestore database.
/* a sample user object */
{
"name" : "John Doe",
"image" : "http://lorempixel.com/",
"about" : "I don't know who I am.",
"id" : "1234567890",
"username" : "johndoe",
"uid" : "xxxxxxxx-xxxx-1234-5678-xxxxxxxxxxxx"
}
user_init
This will be set true
once user
status is checked by watchUser()
. It will be true
, even if the user is not logged in. You can use user_init
to show loading...
screen before your app checks the user
status.
Global Functions
watchUser({ nodb, cb })
This function needs to be executed once and it will watch user status changes. If the user logs in, it sets user
state, and if the user logs out it sets null to user
. watchUser()
automatically initializes firebase
along the way. The one liner
useEffect(() => { watchUser() }, [])
works to initialize user management as shown below. Pass nodb = true
if you don't want to store user data to Firestore
. You can also use cb
argument to execute with the user
object, every time user login state changes.
useEffect(() => {
watchUser({ nodb: true, cb : (new_user) => {
console.log(new_user)
})
}), [])
login({ provider, nodb })
Login the user. Pass a provider to use. You need to setup each provider in Firebase Console. The available providers are listed below.
provider
: twitter
, facebook
, github
, google
login
returns the user object from Firebase Authentication when successful.
const [err, new_user] = await login({ provider: 'twitter' })
logout()
Logout the user.
deleteAccount({ uid })
Delete the user account. Pass the uid
from user
object. It deletes the account from Firebase Authentication
but only markes the user {status : "deleted"}
in Firestore
.
Examples
import { useEffect } from "react"
import { bind } from "nd"
export default bind(
({ $, init }) => {
const fn = init([ "initFB", "watchUser", "login", "logout", "deleteAccount" ])
useEffect(() => { fn.watchUser() }, [])
return (
<div>
{$.user_init === false ? (
"loading..."
) : $.user === null ? (
<div onClick={() => fn.login({ provider: "twitter" })}>login</div>
) : (
<div>
<div>Hello, {$.user.name}!</div>
<div onClick={fn.logout}>logout</div>
<div onClick={() => fn.deleteAccount({ uid: $.user.uid })}>delete</div>
</div>
)}
</div>
)
},
["user", "user_init"]
)