Redirecting Users Between Django and Ember On One Site

One of the biggest challenges startups face is scaling. Shippo’s core technology is our powerful API, built in multiple languages, plus, a web interface, built with a Django Template. We support stand-alone e-commerce stores, e-commerce marketplaces, and platforms, all of whom have their own individualized shipping preferences. In an attempt to scale our technology to support a diverse customer base, one big decision we made was to move from a Django template to a Javascript web application framework.

We determined that, while scaling, this change will allow us to:

• Become 100% API-oriented
• Structure our front-end code much better
• Improve our front-end testing
• We decided to use Ember (for more info, see this deck) and are currently in the middle of performing the front-end migration from Django to Ember.

This blog post is a tutorial meant to help developers and technical project managers understand the challenges that we faced while migrating our very first web page to Ember. The two biggest challenges we found were with Authentication and Hosting. In this first post, we’ll dive into the details around Authentication.

Session Id to JWT

Because we were already been using the default Django Authentication, we decided to maintain that on the backend level. But we had to find a way to authenticate our Ember users. We decided to use the JSON Web Token (JWT) for multiple reasons:

• Fast authentication (no call to the Database)
• Well-supported by the Django Rest Framework (ref pip install)
• Well-supported by Ember (ref simple-auth)
• Found more information about JWT vs Cookies

Here are the steps we took to correctly setup the JWT with Ember <-> Django.

1. Add the authentication class to Django
2. Convert Django Session ID into JWT
3. Add the JWT to the cookies and redirect the Django url to Ember app
4. Inject the JWT to the header in Ember and remove it from the Cookies

1) Add Django Authentication

Thanks to the django-rest-framework-jwt package, it was easy to add the security

2) Convert Django Session ID Into JWT

The django-rest-framework-jwt package comes with conversion functions from User entity to JWT. The token is generated from user.pk, user.email, username and a timestamp. The data is then encoding with JWT.encode. Here is the gist of the function.

Converting a user session into a JWT is now straightforward:

3) Add a Cookie to the Http Response and Redirect the User to the Ember App

Because we are redirecting the user from Django to Ember, we need to send the JWT to the Ember app. We used cookies over SSL to first transmit the JWT to the front-end:

4) JWT on the Ember side

Using Ember-cli, we used the add-ons ember-cli-simple-auth-token. As we do the authentication with Django, we have to pass the JWT to the Ember App. We are sending the token using Cookies. Once the front-end receives it, it sets the jwt-header to the jwt-Cookie value. Then we expire the corresponding Cookie. The package Cookies-js was helpful in manipulating Cookies on the Ember side:

Conclusion

We chose this approach to strengthening our scaling capabilities in order to be flexible with both Ember & Django. After resolving the authentication issue, we deployed our App to AWS. Check out the next post coming later this week, which will include a tutorial on deploying your ember-cli application to S3 / Cloudfront.

Check out the complementary deck we put together on the migration from Django to Ember here.

We welcome your feedback – please post in the comments below!

– Matthieu Nowicki, Software Developer at Shippo

Shippo is a multi-carrier API and web app that helps retailers, marketplaces and platforms connect to a global network of carriers. Businesses use Shippo to get real-time rates, print labels, automate international paperwork, track packages and facilitate returns. Shippo provides the tools to help businesses succeed through shipping.