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.
- Add the authentication class to Django
- Convert Django Session ID into JWT
- Add the JWT to the cookies and redirect the Django url to Ember app
- 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:
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!
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.