Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app
my-project
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.
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.
Strapi is the leading open-source, headless, customizable Content Management System. 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.
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).
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.
At the end of this tutorial, we will have covered how to add authentication to our React application with Strapi.
To follow through with this article, you need:
We’ll build a simple social card application, where users can register, log in, and edit their social cards.
To get started, we will begin by setting up the backend with strapi.
mkdir react_strapi_auth
cd react_strapi_auth
mkdir backend
mkdir frontend
Our project structure will look similar to this:
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.# 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.
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 .
Now, we will add 7 more fields to this collection. Click on + ADD ANOTHER FIELD to add these fields.
1
2
3
Default value : Hello There 👋,
Required field : ✅
Maximum length : 120
1
RegExp pattern: [(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)
1
RegExp pattern: [(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)
1
Unique field: ✅
1
Unique field: ✅
1
Unique field: ✅
Click on Save; this will save the changes to the collection type and restart the server.
As Strapi is secure by default, we cannot access data from the API unless we enable permissions. To set permissions:
Go to Authenticated and enable the following actions for the User , Auth and Permissions under Users-permissions.
1
- User ( Select All ✅ )
1
- Permission ( Select All ✅ )
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. The backend setup is done; now, move forward and set up the front-end of our application.
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.# Change directory cd frontend # Create react project npx create-react-app . #OR yarn create react-app .
Remove these files:
Rename these files accordingly:
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.
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.
Create a src/constant.js
file and add the below content to it.
1
2
3
4
5
6
# 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 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);
};
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.
Create a folder named context
and create a file AuthContext.js
.
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.
1
2
3
4
5
6
7
8
9
10
# context/AuthContext.js
import { createContext, useContext } from "react";
export const AuthContext = createContext({
user: undefined,
isLoading: false,
setUser: () => {},
});
export const useAuthContext = () => useContext(AuthContext);
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# 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 (
<AuthContext.Provider
value={{ user: userData, setUser: handleUser, isLoading }}
>
{children}
</AuthContext.Provider>
);
};
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 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(
<React.StrictMode>
<AuthProvider>
<Router>
<App />
</Router>
</AuthProvider>
</React.StrictMode>
);
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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
# 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 (
<Space className="header_space">
<Button className="header_space_brand" href="/" type="link">
<CgWebsite size={64} />
</Button>
<Space className="auth_buttons">
{user ? (
<>
<Button className="auth_button_login" href="/profile" type="link">
{user.username}
</Button>
<Button
className="auth_button_signUp"
type="primary"
onClick={handleLogout}
>
Logout
</Button>
</>
) : (
<>
<Button className="auth_button_login" href="/signin" type="link">
Login
</Button>
<Button
className="auth_button_signUp"
href="/signup"
type="primary"
>
SignUp
</Button>
</>
)}
</Space>
</Space>
);
};
export default AppHeader;
This component will be responsible for fetching all the available profiles in our application and then showing social cards for all the profiles.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
# 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 <Spin size="large" />;
}
return (
<Row gutter={[32, 32]}>
{profiles.map((profile, index) => (
<Col md={8} lg={8} sm={24} xs={24} key={`${profile.id}_${index}`}>
<Card className="social_card">
<Space
className="social_card_space"
direction="vertical"
align="center"
>
<Image
className="social_image"
preview={false}
src={
profile.avatar_url ??
`${AVATAR_API}?name=${profile.username}&background=1890ff&color=fff`
}
/>
<Typography.Title level={5}>{profile.username}</Typography.Title>
<Typography.Paragraph>{profile.about}</Typography.Paragraph>
<Space size={16} wrap>
{profile.twitter_username && (
<Button
className="social_button twitter"
href={`https://twitter.com/${profile.twitter_username}`}
type="link"
target="_blank"
>
<AiFillTwitterCircle size={24} />
</Button>
)}
{profile.linkedin_username && (
<Button
className="social_button linkedin"
href={`https://www.linkedin.com/in/${profile.linkedin_username}`}
type="link"
target="_blank"
>
<AiFillLinkedin size={24} />
</Button>
)}
{profile.github_username && (
<Button
className="social_button github"
href={`https://github.com/${profile.github_username}`}
type="link"
target="_blank"
>
<AiFillGithub size={24} />
</Button>
)}
{profile.website_url && (
<Button
className="social_button website"
href={profile.website_url}
type="link"
target="_blank"
>
<CgWebsite size={24} />
</Button>
)}
{profile.email && (
<Button
className="social_button gmail"
href={`mailto:${profile.email}`}
type="link"
target="_blank"
>
<SiGmail size={24} />
</Button>
)}
</Space>
</Space>
</Card>
</Col>
))}
</Row>
);
};
export default SocialCards;
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. 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
# 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 (
<Fragment>
<Row align="middle">
<Col span={isDesktopView ? 8 : 24} offset={isDesktopView ? 8 : 0}>
<Card title="SignUp">
{error ? (
<Alert
className="alert_error"
message={error}
type="error"
closable
afterClose={() => setError("")}
/>
) : null}
<Form
name="basic"
layout="vertical"
onFinish={onFinish}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
type: "string",
},
]}
>
<Input placeholder="Username" />
</Form.Item>
<Form.Item
label="Email"
name="email"
rules={[
{
required: true,
type: "email",
},
]}
>
<Input placeholder="Email address" />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true }]}
>
<Input.Password placeholder="Password" />
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className="login_submit_btn"
>
Submit {isLoading && <Spin size="small" />}
</Button>
</Form.Item>
</Form>
<Typography.Paragraph className="form_help_text">
Already have an account? <Link to="/signin">Sign In</Link>
</Typography.Paragraph>
</Card>
</Col>
</Row>
</Fragment>
);
};
export default SignUp;
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
# 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 (
<Fragment>
<Row align="middle">
<Col span={isDesktopView ? 8 : 24} offset={isDesktopView ? 8 : 0}>
<Card title="SignIn">
{error ? (
<Alert
className="alert_error"
message={error}
type="error"
closable
afterClose={() => setError("")}
/>
) : null}
<Form
name="basic"
layout="vertical"
onFinish={onFinish}
autoComplete="off"
>
<Form.Item
label="Email"
name="email"
rules={[
{
required: true,
type: "email",
},
]}
>
<Input placeholder="Email address" />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true }]}
>
<Input.Password placeholder="Password" />
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className="login_submit_btn"
>
Login {isLoading && <Spin size="small" />}
</Button>
</Form.Item>
</Form>
<Typography.Paragraph className="form_help_text">
New to Social Cards? <Link to="/signup">Sign Up</Link>
</Typography.Paragraph>
</Card>
</Col>
</Row>
</Fragment>
);
};
export default SignIn;
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
# 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 <Spin size="large" />;
}
return (
<Card className="profile_page_card">
<Form
layout="vertical"
initialValues={{
username: user?.username,
email: user?.email,
twitter_username: user?.twitter_username,
linkedin_username: user?.linkedin_username,
github_username: user?.github_username,
avatar_url: user?.avatar_url,
website_url: user?.website_url,
about: user?.about,
}}
onFinish={handleProfileUpdate}
>
<Row gutter={[16, 16]}>
<Col md={8} lg={8} sm={24} xs={24}>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: "Username is required!",
type: "string",
},
]}
>
<Input placeholder="Username" />
</Form.Item>
</Col>
<Col md={8} lg={8} sm={24} xs={24}>
<Form.Item
label="Email"
name="email"
rules={[
{
required: true,
message: "Email is required!",
type: "email",
},
]}
>
<Input placeholder="Email" />
</Form.Item>
</Col>
<Col md={8} lg={8} sm={24} xs={24}>
<Form.Item
label="Avatar Url"
name="avatar_url"
rules={[
{
type: "url",
},
]}
>
<Input placeholder="Avatar Url" />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="About"
name="about"
rules={[
{
required: true,
type: "string",
max: 120,
},
]}
>
<Input.TextArea placeholder="About" rows={6} />
</Form.Item>
</Col>
<Col md={8} lg={8} sm={24} xs={24}>
<Form.Item
label="Twitter Username"
name="twitter_username"
rules={[
{
type: "string",
},
]}
>
<Input placeholder="Twitter Username" />
</Form.Item>
</Col>
<Col md={8} lg={8} sm={24} xs={24}>
<Form.Item
label="LinkedIn Username"
name="linkedin_username"
rules={[
{
type: "string",
},
]}
>
<Input placeholder="LinkedIn Username" />
</Form.Item>
</Col>
<Col md={8} lg={8} sm={24} xs={24}>
<Form.Item
label="Github Username"
name="github_username"
rules={[
{
type: "string",
},
]}
>
<Input placeholder="Github Username" />
</Form.Item>
</Col>
<Col md={8} lg={8} sm={24} xs={24}>
<Form.Item
label="Website Url"
name="website_url"
rules={[
{
type: "url",
},
]}
>
<Input placeholder="Website Url" />
</Form.Item>
</Col>
</Row>
<Button
className="profile_save_btn"
htmlType="submit"
type="primary"
size="large"
>
{loading ? (
<>
<Spin size="small" /> Saving
</>
) : (
"Save"
)}
</Button>
</Form>
</Card>
);
};
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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 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 (
<Routes>
<Route path="/" element={<SocialCards />} />
<Route path="/signin" element={<SignIn />} />
<Route path="/signup" element={<SignUp />} />
<Route
path="/profile"
element={getToken() ? <Profile /> : <Navigate to="/signin" />}
/>
</Routes>
);
};
export default AppRoutes;
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 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 (
<Layout>
<Row gutter={[0, 32]}>
<Col span={24}>
<Header>
<AppHeader />
</Header>
</Col>
<Col span={22} offset={1}>
<Content>
<AppRoutes />
</Content>
</Col>
</Row>
</Layout>
);
};
export default App;
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.
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.
Here are a few articles I think will be helpful:
Here is the code for the React frontend and Strapi backend:
Software Engineer | OpenSource Contributor | Technical Writer