Sending ID token to signInSuccessUrl in firebaseui

user_7422133 0
Viewed 548

I'm using firebaseUI to sign in users to my web app. I am using the redirect option. Upon successful sign in, the users are redirected to signInSuccessUrl, which is the admin page of my web app. However, I want to be able to pass the ID token associated with the user to the admin endpoint, where it can be authenticated and checked whether the user trying to log in has admin permissions or not (this I do by checking the user permissions in my database).

I've considered a few other options, namely:

  1. Using firebase.auth().onAuthStateChanged on the admin page itself, checking if the user is signed in, and making a request to the backend to check if the user is an admin. If these conditions are met, render the page, otherwise, show permission denied. The problem with this approach is that:

    • It moves a significant part of the auth to the client side
    • I can't restrict access at the endpoint level itself. In contrast, if I send an ID token, I can check if the user is an admin or not and accordingly decide what to render, instead of always rendering the admin page and then checking on the client side if the user is logged in and is an admin.

  2. Making a dummy page in between the firebase sign-in page and the admin home page. This dummy page would check if the user is signed in using onAuthStateChanged as mentioned above, make a request to the backend to check if the user has admin permissions, and based on the results, redirect to either the admin home page or show permission denied and go back to the login page. This is how the config would look like if I do this:

var uiConfig = {
  signInSuccessUrl: '/admintestpage/',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID
  ]
}

The /admintestpage/ endpoint would render test.html, which would have code something like:

<script type="text/javascript">
      initApp = function() {
        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            idToken = user.getIdToken();
            /*Send idToken to a backend api to check if the corresponding user is an admin*/
            /*redirect to https://my-app.com/adminpage/ if user is an admin, otherwise, redirect to https://my-app.com/login/ */
          } else {
              /*user is signed-off, redirect to https://my-app.com/login */
          }
     }
</script>

I'm keeping this as the last option as it doesn't look like a very good flow.

Here's how my uiConfig looks right now:

var uiConfig = {
  signInSuccessUrl: '/adminpage/',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID
  ]
}

The Crux is that I want to render my admin home page only if I know beforehand that the user is logged in and is an admin. I want to know if there is a way to pass the ID token as a basic auth header when redirecting to the signInSuccessUrl from the firebaseUI page, or if the idea of sending an ID token itself is not necessary and there is an alternate better flow.

firebaseui firebase-authentication firebase javascript
1 Answers

I think you're on the right track. I've been struggling to find something elegant to do this as well, but I ended up doing what you did. Ideally I wish signInSuccessUrl passed the jwt payload, therefore, my backend server could verify its authenticity, and I can then look up the user and then set the session or reject the session.

A lot of the API's and docs are written in the context of a "Firebase first" or "Firebase only" so you have to start getting creative integrating with a traditional REST API.

My context is somewhat similar. I'm a mobile-only app that used Firebase auth to offload auth, in exchange, it then linked to my own custom token. Recently I needed to make a few web properties and wanted to implement this same exchange for my own session management in a traditional client/server synchronous REST page.

window.initApp = function() {
  firebase.auth().onAuthStateChanged(function(user) {

    if (user) {      
      // User is signed in.
      user.getIdToken().then(function(accessToken) {
        redirectPost("/login", {"access_token": accessToken, "authenticity_token": $("meta[name='csrf-token']").attr('content')})
      });
    } else {
      // User is signed out.

    }
  }, function(error) {
    console.log(error);
  });
};
user_7757620
Related