How to use firebase ui web Authentication with Django?

I’m writing this content because adding social authentication system to the server side application is quite a lot of work. I was used django-allauth and following the individual social authentication provider documentation to implement the login system if not easy as it seems. So in this documentation I am explaining what I decided to use for implementing the social authentication in my website. As I said earlier I’ve used django-allauth in my past projects I like that but something about firebase is encouraging me to use again and again. So I decided to use that for my project. There is lot of things in the firebase but I’m only want Authentication from it because it’s just works. Let’s deep dive into the configuration and how I make it work in my Django projects.

Initialise the Firebase.

Create login.html file and add below code in it.

<script src="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.css" /> 
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>

First two is for loading the firebase authentication ui. You can also use individual authentication provider but I recommend to use Firebase UI because it’s very very simple process. Once you added the above script in your body tag let’s add below code in login.html.

const firebaseConfig = { // Add your firebase config here }
// Init method for the firebase that takes the firebase configuration as the argument
firebase.initializeApp(firebaseConfig);
// UI element needs to be assigned using firebase auth method.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    signInSuccessWithAuthResult: function(authResult) {
      firebase.auth().currentUser.getIdToken(true).then(function(idToken) {
        // Add code for sending the idToken to the backend. 
      }).catch(function(error) {
        console.log(error)
      })
    }
  }
});

This is the base skeleton I will be using for my project. It’s so simply and readable. I mentioned my signin option as the google and the UI will smart enough to render “Login with Google” in the DOM. After that I’m using callback to get the response from the firebase redirect and here is the tricky part because firebase will authenticate the user in the browser but what about the server side.

Backend Authentication

In order for the Django to verify the user we need to send the idtoken that obtain from the firebase to the backend over the wire. Here is the code for that I use to send the token using the POST method.

var form = document.body.appendChild(document.createElement("form"));
form.action = "/callback/";
form.method = "POST";
var input = form.appendChild(document.createElement("input"));
input.type = "hidden";
input.name = "token";
input.value = idToken;
form.submit();

Once you place the above code in the script that’s it. There is no other thing needed in the frontend. Let’s see what we need to do in the backend. In the backend you need to install firebase-admin using the pip install. After that you have to create the firebase service account credential and then place it in the root folder.

import firebase_admin
from firebase_admin import auth, credentials

google_client_id = settings.GOOGLE_CLIENT_ID

token = request.POST.get("token")

if not firebase_admin._apps:
    cred = credentials.Certificate(
        settings.BASE_DIR / "google_service_account.json"
    )
    default_app = firebase_admin.initialize_app(cred)

decoded_token = auth.verify_id_token(token)

Add above code in the relevant part of your Django view function. We need to initialise the firebase admin using the service account credential. After that we can use the verify_id_token to verify the token and the resulting decoded_token contains uid common across all of the providers and then name and picture as well as the email address.

Conclusion

We saw that how to configure Firebase UI in the template and then how to verify the id token in the Django view function. The resulting is nice login with google button will appear with no extra work and it will just work. Cheers.