import React, { useState, useEffect } from 'react';
import app from '../Firebase';

const AuthContext = React.createContext();

/**
 * AuthProvider component that keeps track of the authentication status of the
 * current user. Allows global use of this status using React Context and should
 * be wrapped around the contents of the App component.
 */
const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    app.auth().onAuthStateChanged(setCurrentUser);
  }, []);

  return (
    <AuthContext.Provider value={{currentUser}}>
      {children}
      </AuthContext.Provider>
  );
}

export { AuthContext, AuthProvider };

@@ -371,20 +371,13 @@
  = (
-%7B children %7D
+props
 ) =%3E
@@ -434,16 +434,64 @@
 e(null);
+%0A  const %5Bpending, setPending%5D = useState(true);
 %0A%0A  useE
@@ -538,16 +538,34 @@
 Changed(
+(user) =%3E %7B%0A      
 setCurre
@@ -574,20 +574,116 @@
 User
+(user
 );%0A  
-%7D, %5B%5D);
+    setPending(false);%0A    %7D);%0A  %7D, %5B%5D);%0A%0A  if (pending) %7B%0A    return ( %3Ch1%3ELoading...%3C/h1%3E );%0A  %7D
 %0A%0A  
@@ -747,16 +747,22 @@
 %0A      %7B
+props.
 children
@@ -763,18 +763,16 @@
 ildren%7D%0A
-  
     %3C/Au

Add Loading screen to wait for authentication