Deliveroo clone with Next.js, GraphQL, Strapi and Stripe (4/7)

Disclaimer You can find the updated version of this tutorial here

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*.

🔐 Authentication

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/developer-docs/latest/getting-started/introduction.html

Authentication

For authentication we are going to use 2 higher order components defaultPage.js and 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:

1mkdir hocs
2cd hocs
3touch defaultPage.js
4touch securePage.js

Path: /frontend/components/hocs/defaultPage.js

Path: /frontend/components/hocs/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:

1cd ..
2yarn add jwt-decode js-cookie strapi-sdk-javascript 
3
4cd lib
5touch auth.js

Path: /frontend/lib/auth.js

Why cookies? 🍪

Nothing related to this food tutorial...

Most of the time, progressive web apps store a JSON Web Token (JWT) in the local storage. That works pretty well, and this is what the Strapi JavaScript SDK does by default (it also stores it as a cookie).

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.

Register

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.

Path: /frontend/pages/signup.js

Logout

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.

Path: /frontend/components/Layout.js

Login

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.

Path: /frontend/pages/signin.js

Now update your index.js page to use the newly created defaultPage HOC.

Path: /frontend/pages/index.js

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.