Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/balakrish001/authentication-functionality-sample
https://github.com/balakrish001/authentication-functionality-sample
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/balakrish001/authentication-functionality-sample
- Owner: Balakrish001
- Created: 2024-08-29T08:48:36.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-29T08:57:02.000Z (5 months ago)
- Last Synced: 2024-11-13T11:41:12.173Z (2 months ago)
- Language: JavaScript
- Size: 187 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
In this project, let's build **Authentication Functionality** by applying the concepts we have learned till now.
### Refer to the image below:
### Design Files
Click to view
- [Login Route](https://assets.ccbp.in/frontend/content/react-js/authentication-functionality-lg-login-output.png)
- [Home Route](https://assets.ccbp.in/frontend/content/react-js/authentication-functionality-lg-home-output-v2.png)
- [About Route](https://assets.ccbp.in/frontend/content/react-js/authentication-functionality-lg-about-output-v2.png)
- [Not Found Route](https://assets.ccbp.in/frontend/content/react-js/authentication-functionality-lg-not-found-output.png)
### Set Up Instructions
Click to view
- Download dependencies by running `npm install`
- Start up the app using `npm start`
### Completion Instructions
Functionality to be added
The app must have the following functionalities
- When an unauthenticated user tries to access the Home Route or About Route, then the page should be navigated to the Login Route
- When an authenticated user tries to access the Home Route, or About Route, then the page should be navigated to the respective route
- When an authenticated user tries to access the Login Route, then the page should be redirected to Home Route
- When the **Logout** button is clicked then the page should be navigated to the Login Route
- When a random path is provided in the URL then the page should be navigated to the Not Found Route
API Requests & Responses
**loginApiUrl**
#### API: `https://apis.ccbp.in/login`
#### Method: `POST`
#### Description:
Returns a response based on the credentials provided
#### Sample Success Response
```json
{
"jwt_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9.nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y"
}
```
Components Structure
Implementation Files
Use these files to complete the implementation:
- `src/App.js`
- `src/components/Login/index.js`
- `src/components/Login/index.css`
- `src/components/Header/index.js`
- `src/components/Header/index.css`
- `src/components/Home/index.js`
- `src/components/Home/index.css`
- `src/components/About/index.js`
- `src/components/About/index.css`
- `src/components/LogoutButton/index.js`
- `src/components/LogoutButton/index.css`
- `src/components/NotFound/index.js`
- `src/components/NotFound/index.css`
- `src/components/ProtectedRoute/index.js`
### Important Note
Click to view
**The following instructions are required for the tests to pass**
- `Home` route should consist of `/` in the URL path
- `Login` route should consist of `/login` in the URL path
- `About` route should consist of `/about` in the URL path
- No need to use the `BrowserRouter` in `App.js` as we have already included in `index.js`
- As this project is mainly designed for Authentication Functionality and does not contain any input fields, use the below sample user credentials to login
- User credentials
```text
username: rahul
password: rahul@2021
```
### Resources
Font-families
- Roboto