====================
Firebase OAth
====================

Introduction
-------------

In order to annex my Security requirement in my application I decided to use Google Firebase as my OAth server. Not only would this work well with my React front-end, but ultimately it could also empower my REST api Java back-end that is using Spring Boot. The motivation for this addition is that it provides another layer of security, that in case of a data breach the impact will be limited. This page will not be a guide to recreate the same environment, but rather a display that I've done the work required to meet this requirement. 

.. image:: https://i.imgur.com/DDGpWmO.png

Theory
-------

What is OAth? 

It's a system that allows for Authentication to be relegated to another party. This means you can use login credentials from one provider to log onto the systems of another provider. For example, you can use google or apple login information to identify yourself in a game on your smartphone.

Say, you want to visit a site like eBay. Because this website allows financial transactions, the owners want you to create an account. You can make an account on their system, but this forces you to provide your billing information, remember yet another password and other such annoyances. Instead, you can log on using your Google account. When prompted to authenticate, you input your credentials in a pop-up from a server owned by Google, not eBay. Google sends you an "OAuth-token": a cookie containing an encrypted message saying that Google is SURE you are who you say you are. The pop-up closes and the eBay-website collects the token, checks it and provides access. At the same time, through a separate channel, Google provides access to your billing information (if you opted-in, of course).

Source: https://www.reddit.com/r/explainlikeimfive/comments/2ba1aw/eli5_what_is_oauth/



Implementation
---------------

I created my Firebase project, and in it I created a Ramses web component. 

.. image:: https://i.imgur.com/oxlenYX.png

I created a Firestore database. 

.. image:: https://i.imgur.com/1BY0sbC.png

After that I adjusted the authentication to allow email/password logins. 

.. image:: https://i.imgur.com/Ri4gI5E.png

I then cloned a React-boiler-plate application with an example, providing me insights into the usage of Firebase. 

.. image:: https://i.imgur.com/yWxh0oU.png

And from reverse engineering this & finding out how the implementation works I brought the adjustments to my own React website. 

These functions can be highlighted:

.. code-block:: javascript

  const register = e => {
    e.preventDefault()
    setError('')
    if(validatePassword()) {
      // Create a new user with email and password using firebase
        createUserWithEmailAndPassword(auth, email, password)
        .then(() => {
          sendEmailVerification(auth.currentUser)   
          .then(() => {
            setTimeActive(true)
            navigate('/verify-email')
          }).catch((err) => alert(err.message))
        })
        .catch(err => setError(err.message))
    }
    setEmail('')
    setPassword('')
    setConfirmPassword('')
  }

This allows a user to register & sends an email confirmation. 

.. code-block:: javascript

        const login = e => {
      e.preventDefault()
      signInWithEmailAndPassword(auth, email, password)
      .then(() => {
        if(!auth.currentUser.emailVerified) {
          sendEmailVerification(auth.currentUser)
          .then(() => {
            setTimeActive(true)
            navigate('/verify-email')
          })
        .catch(err => alert(err.message))
      }else{
        navigate('/')
      }
      })
      .catch(err => setError(err.message))
    }

This allows a user to login, and checks if their email is verified or not. Only after logging in can a user see the dashboard. 

Validation
-----------

Opening it in a window prompts the following log-in menu: 

.. image:: https://i.imgur.com/P8f7r9N.png

After logging in, the token can be retrieved from the console: 

.. image:: https://i.imgur.com/NjSCLN5.png