Skip to content

Commit 4812dbf

Browse files
tienbkutienbku
committed
first commit
0 parents  commit 4812dbf

36 files changed

+12755
-0
lines changed

‎.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
PORT=8081

‎.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎README.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# React Typescript Authentication example with Hooks, Axios and Rest API
2+
3+
Build React Typescript Authentication and Authorization example using React Hooks, React Router, Axios and Bootstrap (without Redux):
4+
- JWT Authentication Flow for User Signup & User Login
5+
- Project Structure for React Typescript Authentication (without Redux) with React Router & Axios
6+
- Creating React Components with Form Validation using Formik and Yup
7+
- React Typescript Components for accessing protected Resources (Authorization)
8+
- Dynamic Navigation Bar in React Typescript App
9+
10+
For instruction, please visit:
11+
> [React Typescript Authentication example with Hooks, Axios and Rest API](https://bezkoder.com/react-typescript-authentication-example/)
12+
13+
Signup Page:
14+
15+
![react-typescript-authentication-example-signup](react-typescript-authentication-example-signup.png)
16+
17+
Form Validation:
18+
19+
![react-typescript-authentication-example-form-validation](react-typescript-authentication-example-form-validation.png)
20+
21+
Login Page:
22+
23+
![react-typescript-authentication-example-login](react-typescript-authentication-example-login.png)
24+
25+
Profile Page:
26+
27+
![react-typescript-authentication-example-profile-page](react-typescript-authentication-example-profile-page.png)
28+
29+
This React Client works well with following back-end Server:
30+
> [Spring Boot: JWT Authentication & Authorization with MySQL](https://bezkoder.com/spring-boot-jwt-authentication/)
31+
32+
> [Spring Boot: JWT Authentication & Authorization with PostgreSQL](https://www.bezkoder.com/spring-boot-security-postgresql-jwt-authentication/)
33+
34+
> [Spring Boot: JWT Authentication & Authorization with MongoDB](https://bezkoder.com/spring-boot-jwt-auth-mongodb/)
35+
36+
> [Node Express: JWT Authentication & Authorization with MySQL](https://bezkoder.com/node-js-jwt-authentication-mysql/)
37+
38+
> [Node Express: JWT Authentication & Authorization with PostgreSQL](https://bezkoder.com/node-js-jwt-authentication-postgresql/)
39+
40+
> [Node Express: WT Authentication & Authorization with MongoDB](https://bezkoder.com/node-js-mongodb-auth-jwt/)
41+
42+
Related Posts:
43+
> [React Hooks Typescript example Project with Axios and Web API](https://bezkoder.com/react-typescript-api-call/)
44+
45+
> [React (Javascript) CRUD example to consume Web API](https://bezkoder.com/react-crud-web-api/)
46+
47+
> [React Redux CRUD App example with Rest API](https://bezkoder.com/react-redux-crud-example/)
48+
49+
> [React (Hooks) CRUD example to consume Web API](https://bezkoder.com/react-hooks-crud-axios-api/)
50+
51+
> [React Table example: CRUD App with react-table v7](https://bezkoder.com/react-table-example-hooks-crud/)
52+
53+
Using Material UI instead of Bootstrap:
54+
> [React Material UI examples with a CRUD Application](https://bezkoder.com/react-material-ui-examples-crud/)
55+
56+
More Practice:
57+
> [React Pagination example](https://bezkoder.com/react-pagination-material-ui/)
58+
59+
> [React File Upload example](https://bezkoder.com/react-file-upload-axios/)
60+
61+
> [React JWT Authentication & Authorization example](https://bezkoder.com/react-jwt-auth/)
62+
63+
> [React + Redux: JWT Authentication & Authorization example](https://bezkoder.com/react-redux-jwt-auth/)
64+
65+
Fullstack with Node Express:
66+
> [React + Node Express + MySQL](https://bezkoder.com/react-node-express-mysql/)
67+
68+
> [React + Node Express + PostgreSQL](https://bezkoder.com/react-node-express-postgresql/)
69+
70+
> [React + Node Express + MongoDB](https://bezkoder.com/react-node-express-mongodb-mern-stack/)
71+
72+
Fullstack with Spring Boot:
73+
> [React + Spring Boot + MySQL](https://bezkoder.com/react-spring-boot-crud/)
74+
75+
> [React + Spring Boot + PostgreSQL](https://bezkoder.com/spring-boot-react-postgresql/)
76+
77+
> [React + Spring Boot + MongoDB](https://bezkoder.com/react-spring-boot-mongodb/)
78+
79+
Fullstack with Django:
80+
81+
> [React + Django Rest Framework](https://bezkoder.com/django-react-axios-rest-framework/)
82+
83+
Serverless:
84+
> [React Firebase CRUD App with Realtime Database](https://bezkoder.com/react-firebase-crud/)
85+
86+
> [React Firestore CRUD App example | Firebase Cloud Firestore](https://bezkoder.com/react-firestore-crud/)
87+
88+
Integration (run back-end & front-end on same server/port)
89+
> [Integrate React with Spring Boot](https://bezkoder.com/integrate-reactjs-spring-boot/)
90+
91+
> [Integrate React with Node Express](https://bezkoder.com/integrate-react-express-same-server-port/)
92+
93+
94+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
95+
96+
### Set port
97+
.env
98+
```
99+
PORT=8081
100+
```
101+
102+
## Project setup
103+
104+
In the project directory, you can run:
105+
106+
```
107+
npm install
108+
# or
109+
yarn install
110+
```
111+
112+
or
113+
114+
### Compiles and hot-reloads for development
115+
116+
```
117+
npm start
118+
# or
119+
yarn start
120+
```
121+
122+
Open [http://localhost:8081](http://localhost:8081) to view it in the browser.
123+
124+
The page will reload if you make edits.

‎package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "react-typescript-authentication-example",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^5.11.4",
7+
"@testing-library/react": "^11.2.7",
8+
"@testing-library/user-event": "^12.8.3",
9+
"@types/jest": "^26.0.23",
10+
"@types/node": "^12.20.15",
11+
"@types/react": "^17.0.13",
12+
"@types/react-dom": "^17.0.8",
13+
"@types/react-router-dom": "^5.1.8",
14+
"axios": "^0.21.1",
15+
"bootstrap": "^4.6.0",
16+
"formik": "^2.2.9",
17+
"react": "^17.0.2",
18+
"react-dom": "^17.0.2",
19+
"react-router-dom": "^5.2.0",
20+
"react-scripts": "4.0.3",
21+
"typescript": "^4.3.5",
22+
"web-vitals": "^1.1.2",
23+
"yup": "^0.32.9"
24+
},
25+
"scripts": {
26+
"start": "react-scripts start",
27+
"build": "react-scripts build",
28+
"test": "react-scripts test",
29+
"eject": "react-scripts eject"
30+
},
31+
"eslintConfig": {
32+
"extends": [
33+
"react-app",
34+
"react-app/jest"
35+
]
36+
},
37+
"browserslist": {
38+
"production": [
39+
">0.2%",
40+
"not dead",
41+
"not op_mini all"
42+
],
43+
"development": [
44+
"last 1 chrome version",
45+
"last 1 firefox version",
46+
"last 1 safari version"
47+
]
48+
}
49+
}

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>React App</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎public/logo192.png

5.22 KB
Loading

‎public/logo512.png

9.44 KB
Loading

‎public/manifest.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎public/robots.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎react-typescript-authentication-example-form-validation.png

8.24 KB
Loading

‎react-typescript-authentication-example-login.png

11.3 KB
Loading

‎react-typescript-authentication-example-profile-page.png

12.1 KB
Loading

‎react-typescript-authentication-example-signup.png

22.6 KB
Loading

‎src/App.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
label {
2+
display: block;
3+
margin-top: 10px;
4+
}
5+
6+
.card-container.card {
7+
max-width: 350px !important;
8+
padding: 40px 40px;
9+
}
10+
11+
.card {
12+
background-color: #f7f7f7;
13+
padding: 20px 25px 30px;
14+
margin: 0 auto 25px;
15+
margin-top: 50px;
16+
-moz-border-radius: 2px;
17+
-webkit-border-radius: 2px;
18+
border-radius: 2px;
19+
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
20+
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
21+
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
22+
}
23+
24+
.profile-img-card {
25+
width: 96px;
26+
height: 96px;
27+
margin: 0 auto 10px;
28+
display: block;
29+
-moz-border-radius: 50%;
30+
-webkit-border-radius: 50%;
31+
border-radius: 50%;
32+
}

0 commit comments

Comments
 (0)