Merge pull request #174 from andipaetzold/firebase9

Firebase 9

Author: chrisbianca

README.md

@@ -5,11 +5,14 @@ A set of reusable [React Hooks](https://reactjs.org/docs/hooks-intro.html) for [
 [![npm version](https://img.shields.io/npm/v/react-firebase-hooks.svg?style=flat-square)](https://www.npmjs.com/package/react-firebase-hooks)
 [![npm downloads](https://img.shields.io/npm/dm/react-firebase-hooks.svg?style=flat-square)](https://www.npmjs.com/package/react-firebase-hooks)
 
-**This documentation is for v3 of React Firebase Hooks which involved a number of breaking changes, including adding support for Firebase v8.0.0 - more details [here](https://github.com/CSFrequency/react-firebase-hooks/releases/tag/v3.0.0). For v2 documentation, see [here](https://github.com/CSFrequency/react-firebase-hooks/tree/v2.2.0).**
+This documentation is for v4 of React Firebase Hooks which makes the package compatible with Firebase v9 and drops support for previous versions of Firebase - more details [here](https://github.com/CSFrequency/react-firebase-hooks/releases/tag/v4.0.0).
+
+- For v3 documentation (Firebase v8), see [here](https://github.com/CSFrequency/react-firebase-hooks/tree/v3.0.0).
+- For v2 documentation, see [here](https://github.com/CSFrequency/react-firebase-hooks/tree/v2.2.0).
 
 ## Installation
 
-React Firebase Hooks v3 requires **React 16.8.0 or later** and **Firebase v8.0.0 or later**.
+React Firebase Hooks v4 requires **React 16.8.0 or later** and **Firebase v9.0.0 or later**.
 
 > Official support for Hooks was added to React Native in v0.59.0. React Firebase Hooks works with both the Firebase JS SDK and React Native Firebase, although some of the typings may be incorrect.
 

auth/README.md

@@ -1,6 +1,6 @@
 # React Firebase Hooks - Auth
 
-React Firebase Hooks provides a convenience listener for Firebase Auth's auth state. The hook wraps around the `firebase.auth().onAuthStateChange()` method to ensure that it is always up to date.
+React Firebase Hooks provides a convenience listener for Firebase Auth's auth state. The hook wraps around the `auth.onAuthStateChange(...)` method to ensure that it is always up to date.
 
 All hooks can be imported from `react-firebase-hooks/auth`, e.g.
 
@@ -24,30 +24,33 @@ Retrieve and monitor the authentication state from Firebase.
 
 The `useAuthState` hook takes the following parameters:
 
-- `auth`: `firebase.auth.Auth` instance for the app you would like to monitor
+- `auth`: `auth.Auth` instance for the app you would like to monitor
 
 Returns:
 
-- `user`: The `firebase.User` if logged in, or `undefined` if not
+- `user`: The `auth.User` if logged in, or `undefined` if not
 - `loading`: A `boolean` to indicate whether the the authentication state is still being loaded
-- `error`: Any `firebase.auth.Error` returned by Firebase when trying to load the user, or `undefined` if there is no error
+- `error`: Any `AuthError` returned by Firebase when trying to load the user, or `undefined` if there is no error
 
 #### If you are registering or signing in the user for the first time consider using [useCreateUserWithEmailAndPassword](#usecreateuserwithemailandpassword), [useSignInWithEmailAndPassword](#usesigninwithemailandpassword)
 
 #### Full Example
 
 ```js
+import { getAuth, signInWithEmailAndPassword, signOut } from 'firebase/auth';
 import { useAuthState } from 'react-firebase-hooks/auth';
 
+const auth = getAuth(firebaseApp)
+
 const login = () => {
-  firebase.auth().signInWithEmailAndPassword('[email protected]', 'password');
+  signInWithEmailAndPassword(auth, '[email protected]', 'password');
 };
 const logout = () => {
-  firebase.auth().signOut();
+  signOut(auth)
 };
 
 const CurrentUser = () => {
-  const [user, loading, error] = useAuthState(firebase.auth());
+  const [user, loading, error] = useAuthState(auth);
 
   if (loading) {
     return (
@@ -90,17 +93,17 @@ Create a user with email and password. Wraps the underlying `firebase.auth().cre
 
 The `useCreateUserWithEmailAndPassword` hook takes the following parameters:
 
-- `auth`: `firebase.auth.Auth` instance for the app you would like to monitor
+- `auth`: `auth.Auth` instance for the app you would like to monitor
 - `options`: (optional) `Object` with the following parameters:
-  - `emailVerificationOptions`: (optional) `firebase.auth.ActionCodeSettings` to customise the email verification
+  - `emailVerificationOptions`: (optional) `auth.ActionCodeSettings` to customise the email verification
   - `sendEmailVerification`: (optional) `boolean` to trigger sending of an email verification after the user has been created
 
 Returns:
 
 - `createUserWithEmailAndPassword(email: string, password: string)`: a function you can call to start the registration
-- `user`: The `firebase.User` if the user was created or `undefined` if not
+- `user`: The `User` if the user was created or `undefined` if not
 - `loading`: A `boolean` to indicate whether the the user creation is processing
-- `error`: Any `firebase.auth.Error` returned by Firebase when trying to create the user, or `undefined` if there is no error
+- `error`: Any `Error` returned by Firebase when trying to create the user, or `undefined` if there is no error
 
 #### Full Example
 
@@ -165,18 +168,18 @@ const [
 ] = useSignInWithEmailAndPassword(auth, email, password);
 ```
 
-Login a user with email and password. Wraps the underlying `firebase.auth().signInWithEmailAndPassword` method and provides additional `loading` and `error` information.
+Login a user with email and password. Wraps the underlying `auth.signInWithEmailAndPassword` method and provides additional `loading` and `error` information.
 
 The `useSignInWithEmailAndPassword` hook takes the following parameters:
 
-- `auth`: `firebase.auth.Auth` instance for the app you would like to monitor
+- `auth`: `Auth` instance for the app you would like to monitor
 
 Returns:
 
 - `signInWithEmailAndPassword(email: string, password: string)`: a function you can call to start the login
-- `user`: The `firebase.User` if the user was logged in or `undefined` if not
+- `user`: The `auth.User` if the user was logged in or `undefined` if not
 - `loading`: A `boolean` to indicate whether the the user login is processing
-- `error`: Any `firebase.auth.Error` returned by Firebase when trying to login the user, or `undefined` if there is no error
+- `error`: Any `Error` returned by Firebase when trying to login the user, or `undefined` if there is no error
 
 #### Full Example
 

auth/index.js.flow

@@ -1,7 +1,5 @@
 // @flow
-import type { FirebaseUser as User } from 'firebase';
-import type { Auth } from 'firebase/auth';
-import typeof { Error as AuthError } from 'firebase/auth';
+import type { Auth, AuthError, User } from 'firebase/auth';
 
 type LoadingHook<T> = [T | void, boolean, AuthError | void];
 

auth/types.ts

@@ -1,4 +1,4 @@
-import firebase from 'firebase/app';
+import { ActionCodeSettings, AuthError, UserCredential } from 'firebase/auth';
 
 export type AuthActionHook<T, E> = [
   (email: string, password: string) => void,
@@ -7,10 +7,10 @@ export type AuthActionHook<T, E> = [
   E | undefined
 ];
 export type CreateUserOptions = {
-  emailVerificationOptions?: firebase.auth.ActionCodeSettings;
+  emailVerificationOptions?: ActionCodeSettings;
   sendEmailVerification?: boolean;
 };
 export type EmailAndPasswordActionHook = AuthActionHook<
-  firebase.auth.UserCredential,
-  firebase.FirebaseError
+  UserCredential,
+  AuthError
 >;

auth/useAuthState.ts

@@ -1,24 +1,17 @@
-import firebase from 'firebase/app';
+import { Auth, onAuthStateChanged, User } from 'firebase/auth';
 import { useEffect, useMemo } from 'react';
 import { LoadingHook, useLoadingValue } from '../util';
 
-export type AuthStateHook = LoadingHook<
-  firebase.User | null,
-  firebase.auth.Error
->;
+export type AuthStateHook = LoadingHook<User | null, Error>;
 
-export default (auth: firebase.auth.Auth): AuthStateHook => {
+export default (auth: Auth): AuthStateHook => {
   const { error, loading, setError, setValue, value } = useLoadingValue<
-    firebase.User | null,
-    firebase.auth.Error
+    User | null,
+    Error
   >(() => auth.currentUser);
 
   useEffect(() => {
-    const listener = auth.onAuthStateChanged(setValue, setError);
-
-    return () => {
-      listener();
-    };
+    return onAuthStateChanged(auth, setValue, setError);
   }, [auth]);
 
   const resArray: AuthStateHook = [value, loading, error];

auth/useCreateUserWithEmailAndPassword.ts

@@ -1,16 +1,19 @@
+import {
+  Auth,
+  UserCredential,
+  createUserWithEmailAndPassword as firebaseCreateUserWithEmailAndPassword,
+  sendEmailVerification,
+  AuthError,
+} from 'firebase/auth';
 import { useState, useMemo } from 'react';
-import firebase from 'firebase/app';
 import { CreateUserOptions, EmailAndPasswordActionHook } from './types';
 
 export default (
-  auth: firebase.auth.Auth,
+  auth: Auth,
   options?: CreateUserOptions
 ): EmailAndPasswordActionHook => {
-  const [error, setError] = useState<firebase.FirebaseError>();
-  const [
-    registeredUser,
-    setRegisteredUser,
-  ] = useState<firebase.auth.UserCredential>();
+  const [error, setError] = useState<AuthError>();
+  const [registeredUser, setRegisteredUser] = useState<UserCredential>();
   const [loading, setLoading] = useState<boolean>(false);
 
   const createUserWithEmailAndPassword = async (
@@ -19,14 +22,21 @@ export default (
   ) => {
     setLoading(true);
     try {
-      const user = await auth.createUserWithEmailAndPassword(email, password);
+      const user = await firebaseCreateUserWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
       if (options && options.sendEmailVerification && user.user) {
-        await user.user.sendEmailVerification(options.emailVerificationOptions);
+        await sendEmailVerification(
+          user.user,
+          options.emailVerificationOptions
+        );
       }
       setRegisteredUser(user);
       setLoading(false);
     } catch (error) {
-      setError(error);
+      setError(error as AuthError);
       setLoading(false);
     }
   };

auth/useSignInWithEmailAndPassword.ts

@@ -1,13 +1,15 @@
+import {
+  Auth,
+  UserCredential,
+  signInWithEmailAndPassword as firebaseSignInWithEmailAndPassword,
+  AuthError,
+} from 'firebase/auth';
 import { useState, useMemo } from 'react';
-import firebase from 'firebase/app';
 import { EmailAndPasswordActionHook } from './types';
 
-export default (auth: firebase.auth.Auth): EmailAndPasswordActionHook => {
-  const [error, setError] = useState<firebase.FirebaseError>();
-  const [
-    loggedInUser,
-    setLoggedInUser,
-  ] = useState<firebase.auth.UserCredential>();
+export default (auth: Auth): EmailAndPasswordActionHook => {
+  const [error, setError] = useState<AuthError>();
+  const [loggedInUser, setLoggedInUser] = useState<UserCredential>();
   const [loading, setLoading] = useState<boolean>(false);
 
   const signInWithEmailAndPassword = async (
@@ -16,11 +18,15 @@ export default (auth: firebase.auth.Auth): EmailAndPasswordActionHook => {
   ) => {
     setLoading(true);
     try {
-      const user = await auth.signInWithEmailAndPassword(email, password);
+      const user = await firebaseSignInWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
       setLoggedInUser(user);
       setLoading(false);
     } catch (err) {
-      setError(err);
+      setError(err as AuthError);
       setLoading(false);
     }
   };