Any application with users requires authentication, but setting up a complete authentication and authorization workflow from scratch could be time-consuming and inefficient. Strapi enables us to request data for our headless CMS API using multi-authentication providers like Google, Twitter, etc. Making it easier for authenticated users to perform actions only available to authorized users. The Strapi authentication system allows us to quickly build a robust authentication system for our application. In this tutorial, we will create a simple React application that uses Strapi for authentication and authorization. ## An Introduction to Headless CMS The Content Management System (CMS) allows you to create and manage content for your website and applications. In a traditional CMS, the front-end and back-end of the website or application are integrated. Aside from pre-made themes and custom codes, there are no customization options. Traditional CMSes like WordPress, Joomla, and Drupal integrate the website's front-end with the back-end. A headless CMS lets you build out your client or front-end, connecting it to the CMS via APIs. With a headless CMS, the application front-end can be built using any technology, allowing multiple clients to connect and pull data from the same CMS. ## An Introduction to Strapi Strapi is [the leading open-source, headless, customizable Content Management System.](https://strapi.io/) With Strapi, you can easily build custom APIs in REST or GraphQL that can be consumed by any client or front-end framework. We'll be using Strapi API while building authentication and authorization with React. ## Authentication and Authorization with Strapi To authenticate users, Strapi provides two auth options: one social (Google, Twitter, Facebook, etc.) and another local auth (email and Password). Both of these options return a token (JWT token), which will be used to make further requests. JWT token contains user information and expiry which get validated for each request. For authorization, Strapi has the **Roles & Permissions** plugin, which allows complete protection of your API by ACL strategy. ACL strategy manages the permissions between the groups of users. Each time an API request is sent, it checks if an **Authorization** header is present and grabs the JWT token which contains the user ID and verifies if the user making the request has access to the resource. For this tutorial, we will be using local auth (email and password). ## What is React? React is a Javascript library for building a user interface with reusable components. In React, you write once and use it everywhere, resulting in less coding and faster development. React has large community support and it's used by giants like Facebook, Tesla, etc. React provides some outstanding features like JSX (Javascript syntactic extension), Virtual DOM (Document Object Model), etc. [Click here to learn more.](https://reactjs.org/) ## Goal At the end of this tutorial, we will have covered how to add authentication to our React application with Strapi. ## Prerequisites To follow through with this article, you need: - Basic knowledge of JavaScript - Basic knowledge of React - A code editor like [VSCode](https://code.visualstudio.com/) - Node.js version (^14.17.0, or >=16.0.0). You can download Node.js from [Node.js](https://nodejs.org/en/) official site if you haven't already. - [npm](https://www.npmjs.com/) 7 or greater installed ## What We’re Building We’ll build a simple social card application, where users can register, log in, and edit their social cards. ![Sample Screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1662909308572/zCE3Krnch.png) ![Sample Screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1662913109094/SVGCFGHCh.png) ![Sample Screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1662913027581/CMyzslVEL.png) ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662913227725/UVpK5oHYg.png) ## Setting up the Backend With Strapi To get started, we will begin by setting up the backend with strapi. - Create the project directory: ```bash mkdir react_strapi_auth cd react_strapi_auth ``` - Create the directory for the backend: ```bash mkdir backend ``` - Create the directory for the frontend: ```bash mkdir frontend ``` Our project structure will look similar to this: ![project structure](https://cdn.hashnode.com/res/hashnode/image/upload/v1662795240189/v-mnyLbAH.png) ### Creating A Strapi Project Change the directory to the `backend` and then run either of the commands to create the Strapi project in the current folder. > **Note:** `.` at the end is to tell the strapi-app script to create a project in the current folder. ```bash # Change directory cd backend # Create Strapi project yarn create strapi-app . #or npx create-strapi-app@latest . ``` Next, choose the installation type **Quickstart**. It uses the default database `SQLite` and is recommended. Once the installation is complete, the Strapi admin dashboard should automatically open in your browser. Fill out the details to create an admin account. ![Strapi Admin](https://cdn.hashnode.com/res/hashnode/image/upload/v1662795846813/h7r17Uodw.png) ### Modify User Collection Type The collection is a table containing entity information. Strapi, by default, provides us with a `User` collection with minimal fields like username, email, password, etc. For this tutorial, we will be extending the `User` Collection by adding our fields. Navigate to the **Content-Type Builder** > **Collection Types** > **User** . ![Strapi Content-Type Builder Page](https://cdn.hashnode.com/res/hashnode/image/upload/v1662796663231/RgnxWaojf.png) Now, we will add 7 more fields to this collection. Click on **+ ADD ANOTHER FIELD** to add these fields. 1. **about (Rich Text)** Advanced Settings: ``` Default value : Hello There 👋, Required field : ✅ Maximum length : 120 ``` 2. **avatar_url (Text - short text)** Advanced Settings: ``` RegExp pattern: [(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*) ``` 3. **website_url (Text - short text)** Advanced Settings: ``` RegExp pattern: [(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*) ``` 4. **twitter_username (Text - short text)** Advanced Settings: ``` Unique field: ✅ ``` 5. **linkedin_username (Text - short text)** Advanced Settings: ``` Unique field: ✅ ``` 6. **github_username (Text - short text)** Advanced Settings: ``` Unique field: ✅ ``` 7. **profile_slug (UID) (Attached field - username)** ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662798785697/K9rwQMwBn.png) Click on **Save**; this will save the changes to the collection type and restart the server. ### Configure Permissions for Public and Authenticated Users As Strapi is secure by default, we cannot access data from the API unless we enable permissions. To set permissions: * Navigate to **Settings** > **Users & Permissions plugin** > **Roles**. * Go to **Public** and enable the following actions for the **User** under **Users-permissions**. - Count ✅ - find ✅ - findOne ✅ ![Permissions Configuration](https://cdn.hashnode.com/res/hashnode/image/upload/v1662799148673/79lyJcSvy.png) * Click on **Save** and it will update the permission for public users. * Go to **Authenticated** and enable the following actions for the **User** , **Auth** and **Permissions** under **Users-permissions**. - Auth ( Select All ✅ ) ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662799581173/Mo57dOQQ0.png) - User ( Select All ✅ ) ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662799595895/_fsy2_BLr.png) - Permission ( Select All ✅ ) ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662799609191/wkJ9QMFbP.png) * Click on **Save** and it will update the permission for authenticated users. ### Creating Data for the Application You will need to create a few users for our application. To create new users, navigate to **Content Manager** > **User** and click on **Create new entry**. Fill out the required details and click on **Save** to create the entry. ![user](https://cdn.hashnode.com/res/hashnode/image/upload/v1662799928852/rDUaauTkl.png) The backend setup is done; now, move forward and set up the front-end of our application. ## Setting up the Front-End with React Change the directory to the `frontend` and then run either of the commands to create the react project in the current folder. > **Note:** `.` at the end is to tell the create-react-app script to create a project in the current folder. ```bash # Change directory cd frontend # Create react project npx create-react-app . #OR yarn create react-app . ``` **Remove these files:** - App.css - App.test.js - logo.svg - serviceWorker.js **Rename these files accordingly:** - App.js --> App.jsx - index.js --> index.jsx ### Install the Dependencies For this application, we will be using `antd` for UI components, `react-icons` for icons, and `react-router-dom` for routing. Let's install them in our project. ```bash yarn add antd react-router-dom react-icons ``` Alright, we have our frontend set up is ready. Now, let's code our social card application. ### Setup Constant and Helper Create a `src/constant.js` file and add the below content to it. ```js # src/constant.js export const AVATAR_API = "https://ui-avatars.com/api"; export const API = "http://localhost:1337/api"; export const AUTH_TOKEN = "authToken"; export const BEARER = "Bearer"; ``` If the avatar URL is not available, then we will use the avatar API to get the avatar by username. Create a `src/helpers.js` file and add the below content to it. These are the helpers that we will be using for managing the jwt token for the Authenticated user. ```js # src/helpers.js import { AUTH_TOKEN } from "./constant"; export const getToken = () => { return localStorage.getItem(AUTH_TOKEN); }; export const setToken = (token) => { if (token) { localStorage.setItem(AUTH_TOKEN, token); } }; export const removeToken = () => { localStorage.removeItem(AUTH_TOKEN); }; ``` ### Setup the AuthContext Create a React context to store logged-in user details. React Context is designed to store data which is global and shared between components. You can [read more about the react context here](https://reactjs.org/docs/context.html). Create a folder named `context` and create a file `AuthContext.js`. ```bash mkdir context touch AuthContext.js ``` After creating the `AuthContext.js`, add the code below content to it. Here, you are doing two things: first, we are creating the AuthContext to hold 3 things, user, isLoading and setUser method, and second, creating a custom hook by using the useContext hook with AuthContext, so that you can directly use this custom hook to get the AuthContext data. ```js # context/AuthContext.js import { createContext, useContext } from "react"; export const AuthContext = createContext({ user: undefined, isLoading: false, setUser: () => {}, }); export const useAuthContext = () => useContext(AuthContext); ``` ### Setup the AuthProvider The next step is to create a provider component for the application which will use the above AuthContext. AuthProvider will be the wrapper component which will provide the authenticated user details. This component will take one prop which is "children" and return it with AuthContext provider values. it will fetch the authenticated user details if the jwt token is present. ```js # components/AuthProvider/AuthProvider.jsx import React, { useState } from "react"; import { AuthContext } from "../../context/AuthContext"; import { message } from "antd"; import { API, BEARER } from "../../constant"; import { useEffect } from "react"; import { getToken } from "../../helpers"; const AuthProvider = ({ children }) => { const [userData, setUserData] = useState(); const [isLoading, setIsLoading] = useState(false); const authToken = getToken(); const fetchLoggedInUser = async (token) => { setIsLoading(true); try { const response = await fetch(`${API}/users/me`, { headers: { Authorization: `${BEARER} ${token}` }, }); const data = await response.json(); setUserData(data); } catch (error) { console.error(error); message.error("Error While Getting Logged In User Details"); } finally { setIsLoading(false); } }; const handleUser = (user) => { setUserData(user); }; useEffect(() => { if (authToken) { fetchLoggedInUser(authToken); } }, [authToken]); return ( {children} ); }; export default AuthProvider; ``` Now, replace the `src/index.jsx` content with the below content. Here, you're wrapping your App component with AuthProvider and Router Component to handle authenticated users and routing respectively. ```js # src/index.jsx import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import AuthProvider from "./components/AuthProvider/AuthProvider"; import { BrowserRouter as Router } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); ``` ### Create AppHeader Component The application provider has been set up now; let's create a header component for our application. > **Note:** All of the CSS is available in the [`src/index.css` file here.](https://github.com/Sachin-chaurasiya/React_Strapi_Auth_FrontEnd/blob/main/src/index.css) The `AppHeader` component will render four links based on authenticated user data. If user data is present, it will render the user profile link and a logout link. Else, it'll render links for registering and login into the application. ```js # components/Appheader/Appheader.jsx import { Button, Space } from "antd"; import React from "react"; import { CgWebsite } from "react-icons/cg"; import { useNavigate } from "react-router-dom"; import { useAuthContext } from "../../context/AuthContext"; import { removeToken } from "../../helpers"; const AppHeader = () => { const { user } = useAuthContext(); const navigate = useNavigate(); const handleLogout = () => { removeToken(); navigate("/signin", { replace: true }); }; return ( {user ? ( <> ) : ( <> )} ); }; export default AppHeader; ``` ### Create SocialCards Component This component will be responsible for fetching all the available profiles in our application and then showing social cards for all the profiles. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662909308572/zCE3Krnch.png) ```js # SocialCards/SocialCards.jsx import { Button, Card, Col, Image, message, Row, Space, Spin, Typography, } from "antd"; import React, { useEffect, useState } from "react"; import { AiFillTwitterCircle, AiFillLinkedin, AiFillGithub, } from "react-icons/ai"; import { CgWebsite } from "react-icons/cg"; import { SiGmail } from "react-icons/si"; import { API, AVATAR_API } from "../../constant"; const SocialCards = () => { const [profiles, setProfiles] = useState([]); const [isLoading, setIsLoading] = useState(false); const fetchProfiles = async () => { setIsLoading(true); try { const response = await fetch(`${API}/users`); const data = await response.json(); setProfiles(data ?? []); } catch (error) { console.error(error); message.error("Error while fetching profiles!"); } finally { setIsLoading(false); } }; useEffect(() => { fetchProfiles(); }, []); if (isLoading) { return ; } return ( {profiles.map((profile, index) => (

{profile.username} {profile.about} {profile.twitter_username && ( )} {profile.linkedin_username && ( )} {profile.github_username && ( )} {profile.website_url && ( )} {profile.email && ( )} ))} ); }; export default SocialCards; ``` ### Create Register Functionality You will start by creating the signup page component and there, add a form which will contain 3 fields: `username`, `email` and `password`. You'll use the custom hook, `useAuthContext`, to get the `setUser` method to set the Authenticated user data after a successful registration. You'll also use `useScreenSize` custom hook to get the user screen type. You can get the code for it [hooks/useScreenSize.jsx](https://github.com/Sachin-chaurasiya/React_Strapi_Auth_FrontEnd/blob/main/src/hooks/useScreenSize.jsx). Once the user clicks on the submit button, it will call the `onFinish` method which will call the `/auth/local/register` endpoint with user data to create the user. On Success, you'll store the authenticated user data and jwt token and redirect users to their profile. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662913109094/SVGCFGHCh.png) ```js # pages/SignUp/SignUp.jsx import { Alert, Button, Card, Col, Form, Input, message, Row, Spin, Typography, } from "antd"; import React, { Fragment, useState } from "react"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import { useAuthContext } from "../../context/AuthContext"; import useScreenSize from "../../hooks/useScreenSize"; import { API } from "../../constant"; import { setToken } from "../../helpers"; const SignUp = () => { const { isDesktopView } = useScreenSize(); const navigate = useNavigate(); const { setUser } = useAuthContext(); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); const onFinish = async (values) => { setIsLoading(true); try { const response = await fetch(`${API}/auth/local/register`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(values), }); const data = await response.json(); if (data?.error) { throw data?.error; } else { // set the token setToken(data.jwt); // set the user setUser(data.user); message.success(`Welcome to Social Cards ${data.user.username}!`); navigate("/profile", { replace: true }); } } catch (error) { console.error(error); setError(error?.message ?? "Something went wrong!"); } finally { setIsLoading(false); } }; return ( {error ? ( setError("")} /> ) : null} Already have an account? Sign In ); }; export default SignUp; ``` ### Create Sign-In Functionality If the user already has an account, they'll need a login form to authenticate the application. You'll create a Sign-In page to handle that. Once the user clicks on the **submit** button, it will call the `onFinish` method, which will call the `/auth/local` endpoint with user data to create the user. On Success, it'll store the authenticated user data and jwt token and redirect users to their profile. ![Sign-In Functionality](https://cdn.hashnode.com/res/hashnode/image/upload/v1662913027581/CMyzslVEL.png) ```js # pages/SignIn/SignIn.jsx import { Alert, Button, Card, Col, Form, Input, message, Row, Spin, Typography, } from "antd"; import React, { Fragment, useState } from "react"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import { useAuthContext } from "../../context/AuthContext"; import useScreenSize from "../../hooks/useScreenSize"; import { API } from "../../constant"; import { setToken } from "../../helpers"; const SignIn = () => { const { isDesktopView } = useScreenSize(); const navigate = useNavigate(); const { setUser } = useAuthContext(); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); const onFinish = async (values) => { setIsLoading(true); try { const value = { identifier: values.email, password: values.password, }; const response = await fetch(`${API}/auth/local`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(value), }); const data = await response.json(); if (data?.error) { throw data?.error; } else { // set the token setToken(data.jwt); // set the user setUser(data.user); message.success(`Welcome back ${data.user.username}!`); navigate("/profile", { replace: true }); } } catch (error) { console.error(error); setError(error?.message ?? "Something went wrong!"); } finally { setIsLoading(false); } }; return ( {error ? ( setError("")} /> ) : null} New to Social Cards? Sign Up ); }; export default SignIn; ``` ## Add Edit Profile Functionality for Authenticated Users The profile component will hold the authenticated user data and allow the user to update the data. Once the user is logged in to the application, it will redirect to the profile component and this route will be a protected route. ![Edit Profile Functionality](https://cdn.hashnode.com/res/hashnode/image/upload/v1662913227725/UVpK5oHYg.png) ```js # components/Profile/Profile.jsx import React from "react"; import { Button, Card, Col, Form, Input, message, Row, Spin } from "antd"; import { useAuthContext } from "../../context/AuthContext"; import { API } from "../../constant"; import { useState } from "react"; import { getToken } from "../../helpers"; const Profile = () => { const [loading, setLoading] = useState(false); const { user, isLoading, setUser } = useAuthContext(); const handleProfileUpdate = async (data) => { setLoading(true); try { const response = await fetch(`${API}/users/${user.id}`, { method: "PUT", headers: { "Content-Type": "application/json", // set the auth token to the user's jwt Authorization: `Bearer ${getToken()}`, }, body: JSON.stringify(data), }); const responseData = await response.json(); setUser(responseData); message.success("Data saved successfully!"); } catch (error) { console.error(Error); message.error("Error While Updating the Profile!"); } finally { setLoading(false); } }; if (isLoading) { return ; } return (

); }; export default Profile; ``` There are four functionalities: `register`, `login`, `logout` and `Edit Profile`. The next step is to create routes for these and add them to the app component. ## Add Routes There'll be four routes: `home`, `signin`, `signup` and `profile` ( protected ). For the profile route, there should be a condition that if the token is present, it should only render the profile component; otherwise it should redirect the user to the login page. ```js # src/Routes.jsx import React from "react"; import { Routes, Route, Navigate } from "react-router-dom"; import Profile from "./components/Profile/Profile"; import SocialCards from "./components/SocialCards/SocialCards"; import { getToken } from "./helpers"; import SignIn from "./pages/SignIn/SignIn"; import SignUp from "./pages/SignUp/SignUp"; const AppRoutes = () => { return ( } /> } /> } /> : } /> ); }; export default AppRoutes; ``` ### Configure App Component Finally, change the content of `App.jsx` to the below content. It will render the AppRoutes component and everything will be taken care of by the AppRoutes. ```js # src/App.jsx import React from "react"; import { Col, Layout, Row } from "antd"; import AppHeader from "./components/Appheader/Appheader"; import AppRoutes from "./Routes"; const { Header, Content } = Layout; const App = () => { return (

); }; export default App; ``` ## Conclusion So far, we have seen how to build a React application with authentication using Strapi as a headless CMS. Let’s summarize what we’ve been able to achieve so far. - You created and set up Strapi, configured the User collection type, and modified permissions for public and authenticated users. - You created a new React application with antd for styling. - In Strapi, you used the local provider (email and password) for authentication. - In React, you used local storage to store the JWT token, allowing authenticated requests to Strapi. - To store the authenticated user data, you used React Context. There are probably a few things you learned from this tutorial that you can apply to your projects. The Strapi and React application source code is available on GitHub and listed in the resources section if you need them. ## Resources **Here are a few articles I think will be helpful:** - [Authentication, Roles and Permissions in Strapi](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#roles-permissions) - [Registration and Login in Strapi with VueJS](https://strapi.io/blog/registration-and-login-authentication-with-vue-js-and-strapi-1) - [Strapi v4 Authentication with Remix](https://strapi.hashnode.dev/strapi-v4-authentication-with-remix) **Here is the code for the React frontend and Strapi backend:** - [React Frontend GitHub Repository](https://github.com/Sachin-chaurasiya/React_Strapi_Auth_FrontEnd) - [Strapi Backend GitHub Repository](https://github.com/Sachin-chaurasiya/React_Strapi_Auth_BackEnd)