Redirection in Ember Simple Auth

Ember Simple Auth (ESA) is an amazing addon that enables Ember applications to authenticate and authorize users. I have used it in multiple applications with great success each and every time.

But understanding Ember Simple Auth can sometimes feel intense. It’s like walking down a dense street in a bustling city. Everything you could ever want is within reach. You want spicy noodles for lunch? Sure! there’s a ramen shop right around the corner. Need a new pair of socks? OK! there are 5 clothing stores on this block. Overwhelmed is how I feel when navigating through the options and configurations. There is just so much to understand in order to make the simplest change, you’ll miss something if you don’t slow down and take your time.

I had a problem recently involving ESA with a project I’m working on. I asked myself one question: “If an un-authenticated user requests a specific route, how do I redirect them there after login?”. Now take a minute to let that settle in. Do you know the answer? I didn’t have the slightest clue.

It turns out there are multiple ways to solve the problem of redirection in ESA. You could, for instance, use ESA’s session object to store an attempted transition. But there is one solution that trumps anything I could come up with.

ESA redirects by default!

This is where my city metaphor comes into play. I want to redirect a user after login, how do I do this? Well, ESA has a built in redirection mechanism. Where is the documentation for this? It’s at the end of a dimly lit alley, yelling at us like some drunken homeless man.

aforementioned documentation

Can’t see what I’m talking about? Let’s look at the sessionAuthenticated() section. Specifically, lets look at the second sentence:

If there is a transition that was previously intercepted by the AuthenticatedRouteMixin's beforeModel method it will retry it.

And there you go, right in that dark alley, right behind the footlocker, you have your answer. So how does this work? Let’s look at the source code behind the sessionAuthenticated() function.

    sessionAuthenticated() {
        const attemptedTransition = this.get('session.attemptedTransition');
        const cookies = getOwner(this).lookup('service:cookies');
        const redirectTarget = cookies.read('ember_simple_auth-redirectTarget');

        if (attemptedTransition) {
          attemptedTransition.retry();
          this.set('session.attemptedTransition', null);
        } else if (redirectTarget) {
          this.transitionTo(redirectTarget);
          cookies.clear('ember_simple_auth-redirectTarget');
        } else {
          this.transitionTo(this.get('routeAfterAuthentication'));
        }
      },

As you can see. ESA very cleverly uses its own session object to store an attemptedTransition transition object. Whenever the session gets authenticated, it will ‘attempt’ to use this attemptedTransition above anything else. All you need to do is include the ApplicationRouteMixin to your route, and it will work by default. Lets look at an example:

    import Ember from 'ember';
    import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';

    const { Route } = Ember;

    export default Route.extend(ApplicationRouteMixin, {
      //Your awesome JS code here
    });

and there you have it. ship it!

It took a while for me to literally re-create this functionality until I found it in the docs, right in front of my eyes. I hope this helps anyone else with this problem.

Thanks!