https://github.com/nitish2773/reactauthenticationfunctionality
https://github.com/nitish2773/reactauthenticationfunctionality
api cookies react-router reactjs
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nitish2773/reactauthenticationfunctionality
- Owner: Nitish2773
- License: mit
- Created: 2025-04-21T12:16:26.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-21T12:33:54.000Z (about 2 months ago)
- Last Synced: 2025-04-23T03:56:31.355Z (about 2 months ago)
- Topics: api, cookies, react-router, reactjs
- Language: JavaScript
- Homepage:
- Size: 187 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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
> ### _Things to Keep in Mind_
>
> - All components you implement should go in the `src/components` directory.
> - Don't change the component folder names as those are the files being imported into the tests.
> - **Do not remove the pre-filled code**
> - Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.