🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🔐 Authentication (part 4/7)
Tags: react, graphql, beginners, tutorial
Published: 2019-02-04 02:46:43

---
title: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🔐 Authentication (part 4/7)
published: true
description: Part 4/7 Cooking a Deliveroo clone with React, GraphQL, Strapi and Stripe
tags: #react #graphql #beginners #tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wuj0bbwm4jn31muigkgm.png
series: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🔐 Authentication (part 4/7)
---

![Strapi Next.js tutorial](https://thepracticaldev.s3.amazonaws.com/i/wuj0bbwm4jn31muigkgm.png)

*This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.*

**Table of contents**

- 🏗️ [Setup](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----setup-part-17-ked) (part 1) 
- 🏠 [Restaurants](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----restaurants-list-part-27-10ce) (part 2)
- 🍔 [Dishes](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----dishes-list-part-37-5eh/) (part 3)
- 🔐 [Authentication](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----authentication-part-47-eho) (part 4) **-current**
- 🛒 [Shopping Cart](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----shopping-cart-part-57-2h1e) (part 5)
- 💵 [Order and Checkout](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----order-and-checkout-part-67-fph) (part 6)
- 🚀 [Bonus: Deploy](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----bonus-deploy---part-77-1i8e) (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/1.x.x/users.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:
```
mkdir hocs
cd hocs
touch defaultPage.js
touch securePage.js
```

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

 {% gist https://gist.github.com/ryanbelke/0f1fb93339e9589434b4f89dd485854f.js %}

Path: `/frontend/components/hocs/securePage.js`

 {% gist https://gist.github.com/ryanbelke/a04a1433418a162d5a54c63b8ad3b8cb.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:


```
cd ..
yarn add jwt-decode js-cookie strapi-sdk-javascript 

cd lib
touch auth.js


```


Path: `/frontend/lib/auth.js`

 {% gist https://gist.github.com/ryanbelke/75037bc1b9c857fb456a8e5a36aeb4f5.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`

 {% gist https://gist.github.com/ryanbelke/077304ccbbc59c1c1d150ad629c5b77d.js %}

![auth](https://thepracticaldev.s3.amazonaws.com/i/thinngs0h3szqgi577hp.png)

### 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`

 {% gist https://gist.github.com/ryanbelke/d8777dde447f8d99c7fdd7a1269fae87.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`
 {% gist https://gist.github.com/ryanbelke/8db03ef290f4e83b9a41ec5839ca2597.js %}

![signin](https://thepracticaldev.s3.amazonaws.com/i/ywxcbkycjuk7moumucwt.png)


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

Path: `/frontend/pages/index.js`

 {% gist https://gist.github.com/ryanbelke/5706a9ed490cb05f973646c820ec6134.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://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----shopping-cart-part-57-2h1e