Here is how UX Design Integrates with Agile and Scrum

Despite having co-written an award-winning book on the topic and lecturing, teaching and coaching on the topic for nearly 10 years now, I still get many questions — mostly from product managers…

独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Authentication in Phoenix

Authentication solutions are broad. They contain registration and login functionality, as well as Email confirmation, password recovery, update user’s profile etc.

We are going to cover the most valuable part and implement registration and login functionality.

So let’s get started.

We are going to work with users and allow them to use our application. Then we need a User model for that. Let’s start creating it by running the following generator.

Before we migrate the DataBase let’s prevent those fields to contain blank values.

Now, we are ready to migrate our changes.

Our User model is in place, so we can proceed and implement the sign-in functionality.

If we try to open it now we will face the following error message.

We need a route, let’s create it.

Now the page should be rendered without errors.

Before we move on to the actual implementation of the form. Let’s add a new dependency to our project. It would allow us to use SCSS extension for our styles. Although that is not mandatory.

Let’s start from adding a Node.js dependency.

Then we need to rename our app.css file to app.scss.

The next step is to update the assets/brunch-config.js file. We need to extend the files.stylesheets section with:

That is pretty much it what we need to do to make it work.

We are ready to build the form

We have described the form layout here with two fields: Email and Password.

To see the form in our browser we need a create action in the controller.

Now the form looks nicer.

We have a nice looking form, but we cannot use it yet. We are still missing the sign in functionality.

If we try to submit our form now, it would fail, because our create action is blank. Let’s update it.

Let’s create the lib/prater/auth/auth.ex file with the following content:

Of course, keeping the password as a plain text is insecure and you should not do it any application. But are going to improve it soon.

To test our changes we need a user, otherwise how would be able so to sign in. Let’s create one in the DataBase.

Now we are ready, try to sign in with those credentials and you will be redirected to the room’s page.

Now we have our user signed in, but there are no signs about that in the interface.

We can improve it and display the username on the page once he is signed in.

The only new code here is the if condition part with the content inside.

Now we need to implement following functions.

After that, you should see a username in the top right corner of the page.

As soon as our user can sign in, he should be able to sign out as well.

We need a new route for that.

And the button. Let’s add it next to the username.

The button is ready but the delete action in SessionController still missing.

We are dropping the whole session. That signs a user out.

Now, let’s add small improvement and show “Sign In” button for signed out users

We need to add the following link to the else condition in the nav bar.

Now it is easier to navigate to sign in form.

As I’ve already mentioned above, we have a plain password in the database which is unacceptable from the security point of view. The secret credentials should be encrypted.

Let’s fix that terrible mistake.

So at first, we need to add it to the project dependencies.

I’ve chosen the Bcrypt for the sake of example.

Once you’ve added Comeonin to your dependencies run → mix deps.get

We need a new user with hashed password. So let’s drop our existing one and create it again. This time with the encrypted password:

Now if we try to sign in we would get an error because we are not checking the password right.

with the

That should make our sign in functionality work again.

Great. So now our user can sign in, sign out and has a secure password. What we also want to have is the registration functionality. So users will be able to register themselves and we don’t need to create new records from the iex manually.

Similar to sign in functionality we need routes, controller, view, and templates.

First, come the routes:

Now we can add a link to registration page next to our “Sign in” link in the navigation bar.

Fill it in with the complete layout of the form:

Comparing to Sign In form, that form has two more fields such as “Username” and “Password confirmation”.

If you navigate to “/registrations/new” or click the “Sign Up” button then you should see the form.

Our create action is now blank. Let’s update it with the following code:

Here we grab the params submitted through the form. We are trying to register a user. In a successful case, we are signing him in and redirect to the room’s page. We are showing registration form back in case of errors.

The next step would be the implementation of ‘Auth.register/1’.

Now, let’s go to the User model and implement all required changes there.

First, we need to slightly update our User.changeset to look like:

We require only email and username here and also adding length validation for the username. We have skipped the password param because we will work with that separately.

We are adding some validation rules on top of User.changeset. Then we are validating the password confirmation, we want a user to confirm a password from the registration form. Then we clear up the password because we are not going to save it in the DataBase. But we also validate the length of it to be within 6 and 128 characters. As the last step, we are encrypting the password.

We need the last piece to glue all together. We need to update the schema in the User model.

We are defining virtual fields to be able to use them in our changesets.

Try to check the registration form now, it should work.

That concludes our basic implementation.

Today we have made an additional step in our learning path. We have implemented most valuable pieces for any authentication solution. We can register and new user, allow him to sign in and sign out. Of course that there is a big room for improvements. The improved implementation should contain additional components, such as Email confirmation, password recovery, ability to change the password or even sign in by username. It should also restrict users from the access of certain pages if they are not signed in.

But you can get the general idea from that post and proceed with those improvements.

Here is how UX Design Integrates with Agile and Scrum

Authentication in Phoenix

Add a comment

Related posts:

The Power of Action over Thought

El lugar al otro lado

Easter Reflections