This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.
Table of contents
- 🏗️ Setup (part 1)
- 🏠 Restaurants (part 2)
- 🍔 Dishes (part 3)
- 🔐 Authentication (part 4) - current
- 🛒 Shopping Cart (part 5)
- 💵 Order and Checkout (part 6)
- 🚀 Bonus: Deploy (part 7)
Note: the source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial.
For authentication, we can use the Strapi SDK to register and login our users. Strapi will return a JWT token that can be used to verify transactions on the server (although we will not setup server validation in this tutorial you should in a real world application).
The strapi documentation on users can be found here: https://strapi.io/documentation/1.x.x/users.html.
For authentication we are going to use 2 higher order components
securePage.js to wrap our pages and pass an isAuthenticated prop down to the necesseray components.
Make a new directory in the root of the project:
mkdir hocs cd hocs touch defaultPage.js touch securePage.js
To setup our authentication functions we will create a new file under the
/lib folder called
auth.js that will allow us to control and change authentication functionality in one place.
As you will, three new dependencies are imported in the upcoming files, so you need to install them:
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.
To register a user we will pass a username, email and password with the Strapi SDK. This will register a user in Strapi and log the user in. Inside of our signup page we will call the strapiRegister function inside of our auth.js file to register the user then set the appropriate JWT and username cookies inside the browser.
Inside of our
Layout.js component we check for an authenticated user using the isAuthenticated prop, and if a user is detected we display the username and a logout button.
The logout button will call the unsetToken function to delete the cookies and re-route to the home page.
Similar to our login page, the sign-in page will use the Strapi SDK to login in the user and set the appropriate username and JWT cookies for later use.
Now update your
index.js page to use the newly created defaultPage HOC.
Next we wil setup React Context for our shopping cart, and allow our Layout header bar to recognize a user is logged in and display the username
🛒 In the next section, you will learn how to create a full featured shopping cart: https://blog.strapi.io/strapi-next-cart.