We are going to use special endpoint that Directus provides us, and send new user information using Next.js frontend. 

In this episode we are going to implement  signup functionality for our Directus and Next.js app.  You will see, this is very easy.

User Sign Up

Now we are going to create next checkout step in our app, and on that step the user will leave us his or hers data by registering into our app. To do that we are of course going to create an interface in our Vue.js app, and on the backend we will install a User plugin from Rainlab instead of creating our User model manually. 

And also instead of creating our own routes for register and login we are going install JWTAuth plugin which is going to do all the heavy lifting for us. 

Lastly I'm going to show you how to login a user using this method.

In this episode we are going to learn how to register and login users using Vue, OctoberCMS and JWT.

Login and Registration (with JWT)

In the [last episode](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-20-frontend-forms) I told you that it would be a good idea to protect our contact form, so that only registered can input data into our database. In this episode I'm going to show you how to do exactly that, using the _User_ plugin for October CMS.

I'm also going to show you how you can create _Register_, _Login_ and _Profile_ pages for your site and how to setup a sign out link.

In this episode we are going to setup User plugin for October CMS, and learn how to register and login users and also how to protect our pages from unauthorized  access.

Users

Right now our single-page application looks ok. But we can make it better by providing user with some feedback when he/she clicks on something. As you probably noticed there is a slight delay when loading our data. So we want to give user feedback that something is actually loading and not make him look at the blank page.

This is where the vue transitions come in. You can set starting and ending points for your transitions and even make cool animations for better user experience.

In this episode of Drupal 8 and Vue.js tutorials I'm going to show you how you can make transitions between your components for better user experience.

Vue Transitions

Since I didn't find any real way to register a user to our Drupal 8 site we are going to be using a little different approach that will have the same results.

So instead of registering a user in traditional sense we are going to create a user. This will be very similar to creating a movie.

I'm also going to show you how to handle success and error messages once the user inputs his/hers data. Because Drupal won't allow you to have a user with the same address etc.

**REST UI LINK** : <https://www.drupal.org/project/restui>

In this episode of Drupal 8 and Vue.js tutorials we are going to create a way for our users to register on our Drupal 8 site.

Tutorials tagged with: register

Get in touch