Fireact Part 1: Firebase authentication in React

Fireact Sign-in UI

This article is the first part of the series to explains how Fireact implements Firebase features in React. This article will show you how Firebase authentication and React work together in Fireact, and how you can build your logic based on the user authentication and the user attributes.

If you are wondering what’s Fireact, please read Fireact — The open source project for you to fast track your next web app with Firebase and React.

Firebase Sign-in

Fireact uses Firebase authentication as its user authentication mechanism and sign-in UI. That means the whole sign-in flow is managed by Firebase. All Fireact does is to show the sign-in options and update the React user context.

As the installation guide mentioned, Fireact needs a Firebase project to be created and the authentication methods to be enabled. By default, Fireact supports email, Google and Facebook sign-in.

To add other sign-in methods that Firebase supports, such as Twitter, Microsoft, etc, modify the code in src/pages/public/SignIn/index.js and add the sign-in provider in the signInOptions array.

signInOptions: [
 firebase.auth.EmailAuthProvider.PROVIDER_ID,
 firebase.auth.GoogleAuthProvider.PROVIDER_ID,
 firebase.auth.FacebookAuthProvider.PROVIDER_ID 
]

Examples are available in the Firebase documentation here: https://firebase.google.com/docs/auth/web/firebaseui

Tip: Don’t forget to enable the sign-in method in your Firebase project first. Most 3rd party sign-in methods will require you to set up an app or a project in the 3rd party platform.

User Authentication and React Routing

Fireact uses React router to achieve user access control. There are two routers in Fireact: the public router and the auth router.

The public router simply routes the public pages that do not require user authentication. It requires a title for the page, a template to control the page layout and a component of the page.

The auth router is similar to the public router, except it checks the user authentication status with the Firebase library first. Fireact uses authUser state to store the user authentication state, which is created in src/components/FirebaseAuth/index.js as a context object to be used in other components.

const [authUser, setAuthUser] = useState({
  'user': null,
  'checked': false
});

The authUser state contains two properties: user and checked. The user property is the Firebase user object, which will contain all the details about the authenticated user after the user sign in. The check property indicates whether the application has checked the user authentication via the Firebase library. This is important because when the user directly loads a page requires authentication or refreshes the page, before Firebase can validate the user authentication, the user property is still null but that doesn’t mean the user has not signed in. In the auth router, if the checked property is false, it will display a Loader component while waiting for Firebase to validate the authentication. Otherwise, it will check if the user is authenticated, and redirect unauthenticated users to the sign-in page.

<Route
 {...rest}
 render={ matchProps => (
  authUser.checked ? (
   !!authUser.user ? (
    <Template {...rest}>
     <Component {...matchProps} />
    </Template>
   ):(
    <Redirect to={"/signin"} />
   )
  ):(
   <PublicTemplate>
    <Loader size="5x" text="Loading..."/>
   </PublicTemplate>
  )
 )}
/>

The app.js file contains all the routes. If a page requires authentication, use AuthRouter component. Otherwise, just use PublicRouter component. And to make the user context available in the application, everything is under the AuthProvider component. That means, if you create a new page requires authentication, you can simply use const {authUser} = useContext(AuthContext) to get the user context or create a consumer of the AuthContext context.

Retrieving the User Attributes

The purpose of authenticating users is to do things differently based on the user’s authentication state. An example of this is the user profile view component. The component displays the user’s profile data from Firebase.

Here is the consumer code to access the user context and get the display name of the user.

<AuthContext.Consumer>
  {(context) => (
    ...
    context.authUser.user.displayName
  )}
</AuthContext.Consumer>

Another example is the user menu component. It shows the menu items with the user avatar from Firebase when it’s available.

Following the examples, you will be able to create your own components to use the user attributes.

Conclusion

I hope this article helps you to understand how you can:

• Add other sign-in methods in the Fireact UI
• Understand the authentication routing and how to create new pages require authentication
• Display dynamic content based on the user attributes

If you are interested in Fireact, please star the Github project. I will continue to explain how React works with Firestore database and other Firebase features in Fireact.