Building a performant real-time web app with Ember Fastboot and Phoenix (Part 2)

Users and Authentication (API)

Mike North
Apr 12, 2016 · 10 min read
Jose had a role in building Devise, and yet has no plans to bring something similar to Phoenix

Guardian

Initial Setup

mix deps.get
mix phoenix.gen.secret
Secret from environment variable supersedes a hardcoded value
heroku config:set GUARDIAN_SECRET=dJ8HdOlEp6T/Q8…6s/8ET2

Users

Initial setup

mix phoenix.gen.model User users email:string password_hash:string
Adding a DB index to ensure user email address uniqueness in your system
mix do ecto.create, ecto.migrate
MIX_ENV=test mix do ecto.create, ecto.migrate

User Passwords

mix deps.get
mix test
@valid_attrs %{email: “mike@example.com”,
password: “abcde12345”,
password_confirmation: “abcde12345”}

Token Serializer

Registration & Login (API)

Registration: where we are going

{
"data": {
"type": "user",
"attributes": {
"email": <user email>,
"password": <user password>,
"password_confirmation": <user password>
}
}
}
POST /api/register

Login: where we are going

{
"grant_type": "password",
"username": <user email>,
"password": <user password>
}
{
"auth_token": <JWT from Guardian>
}
POST /api/token

Registration: server-side implementation

mix phoenix.server
curl -XPOST -H "Content-type: application/json" -d '{"data": {"type": "user", "attributes": {"email": "mike@example.com", "password": "abcde12345", "password_confirmation": "abcde12345"}}}' 'http://localhost:4000/api/register'
Successfully creating our first user!

Logging In: server-side implementation

post “token”, SessionController, :create, as: :login
mix phoenix.routes
registration_path POST /api/register Peepchat.RegistrationController :create
login_path POST /api/token Peepchat.SessionController :create
Handling unexpected grant types gracefully
curl -XPOST -H "Content-type: application/json" -d '{"grant_type": "password", "username": "mike@example.com", "password": "abcde12345"}' 'http://localhost:4000/api/token'
{“access_token”:”eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjEiLCJleH.....NE3hPQP3BO26Y7Pox1eLw6K74w”}

Rendering Errors

debug_errors: true,
curl -XPOST -H "Content-type: application/json" -d '{"grant_type": "password", "username": "mike@example.com", "password": "wrong_password"}' 'http://localhost:4000/api/token'
{“errors”:{“detail”:”Server internal error”}}
mix deps.get
{“errors”:[{“title”:”Unauthorized”, ”code”:401}]}
curl -XPOST -H "Content-type: application/json" -d '{"data": {"type": "user", "attributes": {"email": "mike____example.com", "password": "abcde12345", "password_confirmation": "abcde12345"}}}' 'http://localhost:4000/api/register'
{
“errors”: [{
“title”: “has invalid format”,
“source”: {
“pointer”: “/data/attributes/email”
},
“detail”: “Email has invalid format”
}]
}
[info] Sent 422 in 290µs

PEEP Stack

Articles about using Ember.js with Phoenix Framework

Mike North

Written by

I turn talented developers into seasoned experts! https://mike.works

PEEP Stack

Articles about using Ember.js with Phoenix Framework