This tutorial is part of the « Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe »:
- 👋 Intro
- 🏗️ Setup (part 1)
- 🏠 Restaurants (part 2)
- 🍔 Dishes (part 3)
- 🔐 Authentication (part 4) - current
- 🛒 Shopping Card (part 5)
- 💵 Order and Checkout (part 6)
- 🚀 Bonus: Deploy (part 7)
- 👏 Conclusion
Note: the source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nuxt-strapi-deliveroo-clone-tutorial.
At this point, you may have expected to get ready to order. But before that, we need to give the user the possibility to register and login to our app. No worries, Strapi comes to the rescue with its Users & Permissions plugin already installed in your project.
As you may imagine, we need a store dedicated to the authentication:
Why cookies? 🍪
Nothing related to this food tutorial...
The fact is that we would like to display the username in the header (coming later in this tutorial). So we need to store it somewhere.
We could have store it in the local storage, but since Nuxt supports server-side rendering, which has not access to the local storage, we need to store it in the cookies.
For that reason, you have to install
npm i js-cookie
Create a new file named
signup.vue in the pages directory, with the following content:
In this page, we insert a form which has three inputs: username, email and address. We also define a method named
handleSubmit which uses the Strapi SDK to register the user before redirecting him to the home page.
Create a new user from this new page: http://localhost:3000/signup.
The user must be able to logout, ideally from a button in the header.
logout mutation and a
username setter in the
Try to reload the page and you will see that nothing change: you still see the
signup links although you registered a user a few minutes ago. That happens because we do not use the
auth/setUser mutation on the load page. Since Nuxt is rendered server side, we need to do a little trick using the
nuxtServerInit action which is invoked when the Nuxt server starts:
npm i cookieparser
For the login view, we are going to do something really similar to the signup view:
That's it for the authentication!
🛒 In the next section, you will learn how to create a full featured shopping card: https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-shopping-card-part-5-7.