react-typescript-login-example - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #golang #machine-learning #docker #java #windows #cli #vue #pytorch #ios #open-source

react-typescript-login-example

(★ 118)

React Typescript Login and Registration example - JWT Authentication & Authorization with Axios, Router, Rest API

파일 탐색기

최종 버전 다운로드 (.zip)

- favicon.ico
- index.html
- logo192.png
- logo512.png
- manifest.json
- robots.txt
- - EventBus.ts
- - board-admin.component.tsx
  - board-moderator.component.tsx
  - board-user.component.tsx
  - home.component.tsx
  - login.component.tsx
  - profile.component.tsx
  - register.component.tsx
- - auth-header.ts
  - auth.service.ts
  - user.service.ts
- - user.type.ts
- App.css
- App.tsx
- index.css
- index.tsx
- logo.svg
- react-app-env.d.ts
- reportWebVitals.ts
- setupTests.ts
.env
.gitignore
package.json
react-typescript-login-example-form-validation.png
react-typescript-login-example-login.png
react-typescript-login-example-profile-page.png
react-typescript-login-example-signup.png
README.md
tsconfig.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Typescript Login example with Axios and Web API

Build React Typescript Login and Registration example with React Router, Axios and Bootstrap (without Redux):
- JWT Authentication Flow for User Signup & User Login
- Project Structure for React Typescript Authentication (without Redux) with React Router & Axios
- Creating React Components with Form Validation using Formik and Yup
- React Typescript Components for accessing protected Resources (Authorization)
- Dynamic Navigation Bar in React Typescript App

For instruction, please visit:
> [React Typescript Login and Registration example](https://www.bezkoder.com/react-typescript-login-example/)

> [React Typescript Login and Registration example (using Hooks)](https://www.bezkoder.com/react-typescript-authentication-example/)

Signup Page:

![react-typescript-login-example-signup](https://raw.githubusercontent.com/bezkoder/react-typescript-login-example/master/react-typescript-login-example-signup.png)

Form Validation:

![react-typescript-login-example-form-validation](https://raw.githubusercontent.com/bezkoder/react-typescript-login-example/master/react-typescript-login-example-form-validation.png)

Login Page:

![react-typescript-login-example-login](https://raw.githubusercontent.com/bezkoder/react-typescript-login-example/master/react-typescript-login-example-login.png)

Profile Page:

![react-typescript-login-example-profile-page](https://raw.githubusercontent.com/bezkoder/react-typescript-login-example/master/react-typescript-login-example-profile-page.png)

This React Client works well with following back-end Server:
> [Spring Boot: JWT Authentication & Authorization with MySQL](https://www.bezkoder.com/spring-boot-jwt-authentication/)

> [Spring Boot: JWT Authentication & Authorization with PostgreSQL](https://www.bezkoder.com/spring-boot-security-postgresql-jwt-authentication/)

> [Spring Boot: JWT Authentication & Authorization with MongoDB](https://www.bezkoder.com/spring-boot-jwt-auth-mongodb/)

> [Node Express: JWT Authentication & Authorization with MySQL](https://www.bezkoder.com/node-js-jwt-authentication-mysql/)

> [Node Express: JWT Authentication & Authorization with PostgreSQL](https://www.bezkoder.com/node-js-jwt-authentication-postgresql/)

> [Node Express: WT Authentication & Authorization with MongoDB](https://www.bezkoder.com/node-js-mongodb-auth-jwt/)

Related Posts:
> [React Typescript CRUD example with Axios and Web API](https://www.bezkoder.com/react-typescript-axios/)

> [React Hooks Typescript CRUD example with Axios and Web API](https://www.bezkoder.com/react-typescript-api-call/)

> [React (Javascript) CRUD example to consume Web API](https://www.bezkoder.com/react-crud-web-api/)

> [React Hook Form Typescript example with Validation](https://www.bezkoder.com/react-hook-form-typescript/)

Fullstack with Node Express:
> [React + Node Express + MySQL](https://www.bezkoder.com/react-node-express-mysql/)

> [React + Node Express + PostgreSQL](https://www.bezkoder.com/react-node-express-postgresql/)

> [React + Node Express + MongoDB](https://www.bezkoder.com/react-node-express-mongodb-mern-stack/)

Fullstack with Spring Boot:
> [React + Spring Boot + MySQL](https://www.bezkoder.com/react-spring-boot-crud/)

> [React + Spring Boot + PostgreSQL](https://www.bezkoder.com/spring-boot-react-postgresql/)

> [React + Spring Boot + MongoDB](https://www.bezkoder.com/react-spring-boot-mongodb/)

Fullstack with Django:

> [React + Django Rest Framework](https://www.bezkoder.com/django-react-axios-rest-framework/)

Serverless:
> [React Typescript Firebase example: Build CRUD App](https://www.bezkoder.com/firebase-typescript-react/)

> [React Typescript Firestore example: Build CRUD App](https://www.bezkoder.com/react-typescript-firestore/)

Integration (run back-end & front-end on same server/port)
> [How to integrate React with Spring Boot](https://www.bezkoder.com/integrate-reactjs-spring-boot/)

> [Integrate React with Node Express on same Server/Port](https://www.bezkoder.com/integrate-react-express-same-server-port/)

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

### Set port
.env
```
PORT=8081
```

## Project setup

In the project directory, you can run:

```
npm install
# or
yarn install
```

or

### Compiles and hot-reloads for development

```
npm start
# or
yarn start
```

Open [http://localhost:8081](http://localhost:8081) to view it in the browser.

The page will reload if you make edits.