Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix(docs): remove v2 auth ready docs from v3 docs - #676
  • Loading branch information
Scott Prue committed Jul 13, 2019
commit 5d44df600f5f7c9168c4067c099be5657fe03acb
75 changes: 0 additions & 75 deletions docs/recipes/auth.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,81 +114,6 @@ export default compose(
)(LoginPage)
```


## Wait For Auth To Be Ready

```js
import firebase from 'firebase'
import { compose, createStore, applyMiddleware } from 'redux'
import { reactReduxFirebase } from 'react-redux-firebase'

// Firebase config
const fbConfig = {
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>'
}
// react-redux-firebase options
const rrfConfig = {
userProfile: 'users', // firebase root where user profiles are stored
attachAuthIsReady: true, // attaches auth is ready promise to store
firebaseStateName: 'firebase' // should match the reducer name ('firebase' is default)
}

const createStore = (initialState = {}) => {
// Initialize Firebase instance
firebase.initializeApp(fbConfig)

// Add redux Firebase to compose
const createStoreWithFirebase = createStore(
rootReducer,
initialState,
compose(
reactReduxFirebase(firebase, rrfConfig),
applyMiddleware(thunk)
)
)

// Create store with reducers and initial state
const store = createStoreWithFirebase(rootReducer, initialState)

// Listen for auth ready (promise available on store thanks to attachAuthIsReady: true config option)
store.firebaseAuthIsReady.then(() => {
console.log('Auth has loaded') // eslint-disable-line no-console
})
return store;
}
```

In order for this to work, the promise must know the name of the location within redux that the state is being stored, which is the function of the `firebaseStateName` config option. By default the `firebaseStateName` parameter is `'firebase'` to match the getting started guide. If you are storing your firebase state under a different place within redux (i.e. the name given to the `firebaseStateReducer`) such as `'firebaseState'` you must pass that name as `firebaseStateName` in your config.

#### Custom Auth Ready Logic

If you want to write your own custom logic for the promise that actually confirms that auth is ready, you can pass a promise as the `authIsReady` config option.

Here is an example showing the default logic:

```js
import { get } from 'lodash'

const config = {
authIsReady: (store, firebaseStateName) => new Promise((resolve) => {
const firebaseAuthState = && state[firebaseStateName].auth
if (get(store.getState(), `${firebaseStateName}.auth.isLoaded`)) {
resolve()
} else {
const unsubscribe = store.subscribe(() => {
if (get(store.getState(), `${firebaseStateName}.auth.isLoaded`)) {
unsubscribe()
resolve()
}
})
}
})
}
```

## List of Online Users (Presence)

Presence keeps a list of which users are currently online as well as a history of all user sessions.
Expand Down
16 changes: 16 additions & 0 deletions examples/complete/typescript/src/AddTodo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import { ExtendedFirebaseInstance, useFirebase} from "react-redux-firebase";

function AddTodo() {
const firebase: ExtendedFirebaseInstance = useFirebase();
function handleAddClick() {
firebase.push("todos", { done: false, text: "Example todo" });
}
return (
<div className="Add Todo">
<button onClick={handleAddClick}>Add Todo</button>
</div>
);
}

export default AddTodo;
28 changes: 14 additions & 14 deletions examples/complete/typescript/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from 'react'
import { Provider } from 'react-redux'
import Home from './Home'
import configureStore from './store'
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore' // make sure you add this for firestore
import { firebase as fbConfig, reduxFirebase as rfConfig } from './config'
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/firestore"; // make sure you add this for firestore
import React from "react";
import { Provider } from "react-redux";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
import { firebase as fbConfig, reduxFirebase as rfConfig } from "./config";
import Home from "./Home";
import configureStore from "./store";

const initialState = {}
const store = configureStore(initialState)
const initialState = {};
const store = configureStore(initialState);
// Initialize Firebase instance
firebase.initializeApp(fbConfig)
firebase.initializeApp(fbConfig);

export default () => (
<Provider store={store}>
Expand All @@ -23,5 +23,5 @@ export default () => (
<Home />
</ReactReduxFirebaseProvider>
</Provider>
)
);

5 changes: 2 additions & 3 deletions examples/complete/typescript/src/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React from "react";
import { ExtendedFirebaseInstance, useFirebase} from "react-redux-firebase";
import AddTodo from "./AddTodo";
import "./App.css";
import logo from "./logo.svg";

function Home() {
const firebase: ExtendedFirebaseInstance = useFirebase();
firebase.push;
return (
<div className="Home">
<header className="App-header">
Expand All @@ -21,6 +19,7 @@ function Home() {
>
Learn React
</a>
<AddTodo />
</header>
</div>
);
Expand Down
12 changes: 6 additions & 6 deletions src/createFirebaseInstance.js
Original file line number Diff line number Diff line change
Expand Up @@ -492,7 +492,7 @@ export default function createFirebaseInstance(firebase, configs, dispatch) {

/**
* @name signInWithPhoneNumber
* Asynchronously signs in using a phone number. This method
* @description Asynchronously signs in using a phone number. This method
* sends a code via SMS to the given phone number, and returns a modified
* firebase.auth.ConfirmationResult. The `confirm` method
* authenticates and does profile handling.
Expand All @@ -501,7 +501,7 @@ export default function createFirebaseInstance(firebase, configs, dispatch) {
*/
/**
* @name initializeAuth
* Initialize auth to work with build in profile support
* @description Initialize auth to work with build in profile support
*/
const actionCreators = mapWithFirebaseAndDispatch(
firebase,
Expand All @@ -518,22 +518,22 @@ export default function createFirebaseInstance(firebase, configs, dispatch) {

/**
* @name ref
* Firebase ref function
* @description Firebase ref function
* @return {firebase.database.Reference}
*/
/**
* @name database
* Firebase database service instance including all Firebase storage methods
* @description Firebase database service instance including all Firebase storage methods
* @return {firebase.database.Database} Firebase database service
*/
/**
* @name storage
* Firebase storage service instance including all Firebase storage methods
* @description Firebase storage service instance including all Firebase storage methods
* @return {firebase.database.Storage} Firebase storage service
*/
/**
* @name auth
* Firebase auth service instance including all Firebase auth methods
* @description Firebase auth service instance including all Firebase auth methods
* @return {firebase.database.Auth}
*/
return Object.assign(firebase, {
Expand Down