rsf-auth

Reducer, actions and sagas to handle authentication with redux-saga-firebase.

Quick start

Install with:

yarn add rsf-auth

Setup the authentication reducer:

import { combineReducers } from 'redux'
import { reducer as auth } from 'rsf-auth'

export default combineReducers({
  auth,
  [...]
})

Start the authentication saga:

import { fork } from 'redux-saga/effects'
import { saga as authSaga } from 'rsf-auth'

import rsf, { authProvider } from '../rsf'

export default function* rootSaga() {
  yield fork(authSaga, rsf, authProvider) // 👈 Pass a ReduxSagaFirebase instance and an authProvider to use
  // [...]
}

Trigger a login:

import { connect } from 'react-redux'
import { login } from 'rsf-auth/actions'

const LoginButton = (login) => <button onClick={login}>Login</button>
export default connect(null, { login })(LoginButton)

Access the state with selectors:

import { selectors } from 'rsf-auth'

// Build authentication selectors
const {
  loadingSelector,
  loggedInSelector,
  userSelector
} = selectors(state => state.auth) // 👈 Use the path you chose to store the authentication data in `combineReducers`

// then, given the state:
userSelector(state) // a firebase.User instance

API

Reducer (import { reducer } from 'rsf-auth')

An usual (state, action) => state redux-style reducer which stores the authentication data and responds to the authentication actions.

Saga (import { saga } from 'rsf-auth')

A redux-saga saga which handles login and logout requests as well as user synchronization.

It takes a ReduxSagaFirebase instance and a Firebase AuthProvider as arguments.

import { saga as auth } from 'rsf-auth'
import rsf from './rsf'

const authProvider = new firebase.auth.GoogleAuthProvider()

function* () {
  yield fork(auth, rsf, authProvider)
}

Actions (import { login, ... } from 'rsf-auth/actions')

login()

Triggers a login with popup using the AuthProvider passed to the saga.

logout()

Triggers a logout.

Types (import { types } from 'rsf-auth')

Object literal containing all the types used by this library:

{
  LOGIN: {
    REQUEST: type`LOGIN.REQUEST`,
    SUCCESS: type`LOGIN.SUCCESS`,
    FAILURE: type`LOGIN.FAILURE`
  },
  LOGOUT: {
    REQUEST: type`LOGOUT.REQUEST`,
    SUCCESS: type`LOGOUT.SUCCESS`,
    FAILURE: type`LOGOUT.FAILURE`
  },
  SYNC_USER: type`SYNC_USER`
}