Ember SimpleAuth & SimpleSAMLPHP Screen Flash

Question

I'm building an Ember application and I have to integrate with SimpleSAMLPHP to handle authentication against multiple identity providers (IdP). At a high level, the authentication flow is as follows:

• User navigates to Ember application
• User is not authenticated (via SimpleAuth) and sees view A.
• User clicks "log in" and is directed to SimpleSAMLPHP, which is outside of the Ember application.
• User enters credentials and is authenticated against whatever IdP and returned to the Ember application.

It's on this return to the Ember application that's the problem. Ember will load view A (the non-authenticated view) because Ember SimpleAuth has not yet reached its sessionAuthenticationSucceeded callback. That callback is reached shortly thereafter and I can render the authenticated view B into the outlet. The problem is the user sees a flash of view A prior to seeing view B.

• Can I POST to SimpleSAMLPHP via AJAX without having to leave the Ember application? I'm assuming that would defeat the point, create security issues, etc.
• Or is there a way to have Ember differ rendering until the sessionAuthenticationSucceeded callback is reached?
• I suppose I could also use some trickery and have view A always be a spinner or something and then render a new view when ready. I think this might just cause other problems, since sessionAuthenticationSucceeded is only executed immediately after authentication.

I'm either missing something simple or there's just not really a good way to do this. I'm open to any suggestions, thanks in advance.

Answer 1

No you cannot POST to simpleSAMLPHP via AJAX. The way SAML / SSO works is that the user is DIRECTED TO THE ADFS PORTAL, the user then SIGNS IN, TOKENS are generated and validated, then the user is SENT BACK TO THE ENDPOINT URL. The VALUE of SSO and SAML is that it leaves ZERO liability for the developer. I have and do incorporate SIMPLESAML / SSO into applications and users authenticate against the Active Directory Server, then are directed back to the SSO application along with SSO ATTRIBUTES. The only attributes that can usually be passed are, USERNAME, FIRST NAME, LAST NAME, PHONE, EMAIL, etc... The purpose of SSO is that you login at ONE PLACE and then are passed to whichever site you were trying to access. We do this for all our PHP enterprise level applications in Academia.

Answer 2

What I ended up doing was basically not having any view logic at the "index" route of my Ember application and instead, creating a new route, which I redirect the user to after log in. I also added the AuthenticatedRouteMixin so I could use the beforeModel hook transition. The gist of it is:

App.ApplicationRoute = Ember.Route.extend(
    SimpleAuth.AuthenticatedRouteMixin,
    SimpleAuth.ApplicationRouteMixin, 
    {

    beforeModel: function (transition) {
        var session = this.get('session');

        if (!Ember.isEmpty(session)) {
            this.transitionTo('new route');
        } else {
            this._super(transition);
        }
    },

    model: function (params) {
        // ...
    },

    renderTemplate: function () {
        // ...
    },

    actions: {

        sessionAuthenticationSucceeded: function () {
            this.renderTemplate();
            this.transitionTo('new route');
        },

        authenticateSession: function () {
            // ...
        },

        invalidateSession: function () {
            // ...
        }
    }
});

Effectively the user is redirected to SimpleSAMLPHP, logs in and on redirection back, Ember redirects to the new route. If they refreshed the page, we see that they have a session in beforeModel and redirect to the new route as well. Now there's no screen flash for the user.