This tutorial is a part of the « NextJS, Strapi, GraphQL, Stripe Deliveroo clone (Part 2/7 - Restaurant List) tutorial series »:

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 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:

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.

Now update your Layout.js file to use the new components:

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.

For that reason, you have to install js-cookie:

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.

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.