An awesome README template to jumpstart the project!
Explore the docs »
View Demo ·
Report Bug ·
Request Feature
- About React-Login-Module
- About The Project
- Username And Password
- Public API's
- Create Client ID Process
- Prerequisites
- Install
- Build With
- Project Demo
- Maintainers
- Contributor
- License
- Contact
- A Almost any web app needs some sort of access control, usually implemented by user login.
- Choosing how user authentication is implemented depends on the type of application and its audience.
- I want to show you a few different ways of creating a login feature in a single-page React application using React-Login-Module.
- The React-Login-Module can be used as a simple out-of-the-box login form. To have more control over the appearance of the user login, you can also implement your own form and use React-Login-Module authentication service to verify the user’s credentials.
- The React-Login-Module is react app.
- It build on React with React-Router, Axios, Google-Authentication, Session-Storage, Suspense and lazy.
- Used Bootstrap and Material-UI to markup the project.
- This app has following components -
- App
- LoginPage
- AdminPage
- IdleTimer
- LoginProtected
- ProtectedRoute
- GoogleLoginBtn
- UserProfile
- Spinner
- ErrorPage
- App is main component is contain IdleTimer, LoginProtected, ProtectedRoute, LoginPage, AdminPage, ErrorPage and Spinner components. It maintain login and logout trigger status to maintain the Login-Module. With the help of React-Router, maintain all the path of React-Login-Module project.
- LoginProtected component contain LoginPage and it's an protected component it's make sure that user logged in or not, if user not logged in then it return LoginPage and if user logged in then it redirect to AdminPage.
- ProtectedRoute component contain the secure or protected components. It make sure user can't access protected routes without login if user trying to access secure routes without login then it redirect to LoginPage.
- LoginPage component contain logo image and GoogleLoginBtn component. LoginPage component has company logo and input fields one for Email, one for Password, one for Terms & Conditions and Privacy Policy's and it all are required fields. User have to write Email and password and accept terms and conditions to login, if user submit correct credentials then it would be login and if user submit incorrect credentials then error alert message would be popup. User can login with google identification also if user has google account then it can login.
- GoogleLoginBtn component contain google login button, functionality and used react-google-login, gapi-script libraries.
Note - If anyone want to use google login feature so he/she has to put own google client id in React-Login-Module project. Due to security reasons I can't share my google client id to publicly.
- AdminPage component contain UserProfile component, Logout button and users container and with the help of public API users information comes.
- UserProfile component contain logged in user information like name, email and profile picture.
- IdleTimer component contain the functionality of auto logout user. It make sure if user not active since a minute then it auto logout the user.
- ErrorPage contain error message with two buttons Go back and Home. Go back button take user to previous route and Home button take user to LoginPage. If user trying to access unknown or unexpected route then this page shows.
- Spinner component contain bootstrap spinner container.
- Used bootstrap, material-ui and css to markup the React-Login-Module project and used session-storage to store logout trigger data and logged in user information. Used axios to request API and with the help of suspense and lazy trying to show component getting load.
- Username - "eve.holt@reqres.in"
- Password - "cityslicka"
- Login Page
- Request for login user
- Request for logged in user information
https://reqres.in/api/login
https://reqres.in/api/users/4
- Admin Page
- Request for get users information
https://reqres.in/api/users?page=1
- Request for get users information
- Go to console.developers.google.com and login.
- Create a new project then select created project. Then go to "APIs & Services" section then go to "OAuth consent screen" section.
- Select "External" and hit "CREATE" button then fill all the information.
- Then go to "Credentials" section and hit "+ CREATE CREDENTIALS" button and select OAuth client ID then fill all the information and save then you would get client ID.
- Copy client ID and open ".env" file which is available in React-Login-Module project then assign client id to "REACT_APP_GOOGLE_CLIENT_ID".
- NPM - Download Link
- Google Client ID - Link
- Clone the React-Login-Module app project.
git clone https://github.com/surajt26/react-login-module.git- Install all dependency which mention in "package.json" file.
npm install- Start React-Login-Module Project.
npm start- React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
- It is maintained by Meta and a community of individual developers and companies.
- React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces.
- React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.
- Axios is a Javascript library used to make HTTP requests from node. js or XMLHttpRequests from the browser and it supports the Promise API that is native to JS ES6.
- It can be used intercept HTTP requests and responses and enables client-side protection against XSRF.
- It also has the ability to cancel requests.
- The Google OAuth 2.0 endpoint supports JavaScript applications that run in a browser.
- The authorization sequence begins when your application redirects a browser to a Google URL; the URL includes query parameters that indicate the type of access being requested.
- When you use OAuth 2.0 for authorization, your app requests authorizations for one or more scopes of access from a Google Account.
- Google displays a consent screen to the user including a summary of your project and its policies and the requested scopes of access.
- Scopes define what kind of user data you'll ask to access on behalf of the user in the consent screen.
- A large React application will usually consist of many components, utility methods, and third-party libraries.
- If an effort isn't made to try to load different parts of an application only when they're needed, a single, large bundle of JavaScript will be shipped to your users as soon as they load the first page.
- This can affect page performance significantly.
- The React.lazy function provides a built-in way to separate components in an application into separate chunks of JavaScript with very little legwork.
- You can then take care of loading states when you couple it with the Suspense component.
- sessionstorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date.
- This means the data stored in the browser will persist even after the browser window is closed.
- npm is a package manager for the JavaScript programming language maintained by npm, Inc.
- npm is the default package manager for the JavaScript runtime environment Node.js.
- It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.
- Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
- It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
- MUI offers a comprehensive suite of UI tools to help you ship new features faster.
- Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.
MIT © Suraj KY
LinkedIn · Gmail · Github · Twitter · Instagram · Project Link