Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/learnwithfair/mern-google-authentication
mern-google-authentication with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
https://github.com/learnwithfair/mern-google-authentication
google-auth google-authentication learn-with-fair learnwithfair mern-google-authentication rahatul-rabbi rahatulrabbi sign-in-with-google web-development
Last synced: 9 days ago
JSON representation
mern-google-authentication with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
- Host: GitHub
- URL: https://github.com/learnwithfair/mern-google-authentication
- Owner: learnwithfair
- Created: 2024-05-04T07:25:15.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-04T08:31:48.000Z (7 months ago)
- Last Synced: 2024-05-05T08:27:48.296Z (7 months ago)
- Topics: google-auth, google-authentication, learn-with-fair, learnwithfair, mern-google-authentication, rahatul-rabbi, rahatulrabbi, sign-in-with-google, web-development
- Homepage:
- Size: 13.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN-GOOGLE-AUTHENTICATION
[![Youtube][youtube-shield]][youtube-url]
[![Facebook][facebook-shield]][facebook-url]
[![Instagram][instagram-shield]][instagram-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Thanks for visiting my GitHub account!
**Sign in with Google** makes it easy for you to sign in and sign up to websites and apps across the internet with the trusted security of your Google Account. It eliminates your dependency on passwords, which reduces the frustrations and security risks associated with them. [see-more](https://blog.logrocket.com/guide-adding-google-login-react-app/)
### [Code-Example](https://github.com/learnwithfair/mern-user-admin-authentication)
## Source Code (Download)
- [Source-code](https://mega.nz/file/JTEAFQSb#ofhBa2_ySO8n253pS3di2rG-NDomk_4bpO2yIqS4VjY)
- [Documentation](https://github.com/learnwithfair/node-express-documentation)
## Required Software (Download)
- VS Code, Download ->https://code.visualstudio.com/download
- Node, Download-> https://nodejs.org/en/download
- MongoDB Shell(msi) , Download-> https://www.mongodb.com/try/download/shell
- MongoDB Compass (msi), Download-> https://www.mongodb.com/try/download/community
- Postman, Download-> https://www.postman.com/downloads/
**Or Online Database (MongoDB Atlas)**
- Register -> https://www.mongodb.com/cloud/atlas/register
## ========== Environment Setup ==========
1. Install Node.js
2. To verify installation into command form by node -v
3. For initialization npm write the query in the command window as npm init -y
4. Setup the opening file into the package.json and change the file with main:'server.js'
5. To create a server using the express package then write a query into the command window as npm install express.
Write code in the server file for initialization
const express = require("express");
const app = express();
app.listen(3000, () => {
console.log("Server is running at http://localhost:3000");
});
6. Install the nodemon package for automatically running the server as- npm i --save-dev nodemon (For Developing purpose)
7. setup the package.json file in the scripts key, write
"scripts": {
"start": "node ./resources/backend/server.js",
"dev": "nodemon ./resources/backend/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
8. use the Morgan package for automatic restart. Hence install the morgan package as npm install --save-dev morgan (Development purpose)
Write code in the server file for initialization
const morgan = require("morgan");
app.use(morgan("dev")); --> Middlewire.
9. Install Postman software for API testing by the URL endpoint.
10. Install Mongobd + MongobdCompass and Mongoshell (For Database)
## ========== Connect MongoDB Database ==========
1. Install Mondodb + Mongodb Compass and Mongodb Shell download from the google.
2. Set up Environment Variable in drive:c/program file
3. Create a directory in the base path of the c drive named data. Inside the data directory create another folder db.
4. Write the command in the CMD window as Mongod. And write the other command in the other CMD window as mongosh.
5. Then Check the version as mongod --version and mongosh --version.
6. Install mongoose package as npm i mongoose
7. Create an atlas account. In the atlas account create a cluster that have a user(as atlas admin) and network access with any access IP address.
8. Connect the database using URL from the atlas cluster or local Mongodb compass using the mongoose package as mongoose. connect('mongodb://localhost:27017/database-name);
## How to use this template
- Step-1: In the Frontend site
```js
import React, { useEffect } from "react";
import GoogleLogin from "react-google-login";
import { gapi } from "gapi-script";
import { loginWithGoogle } from "../services/AuthService";
const Google = () => {
const responseGoogle = async (response) => {
try {
// 1. get the tokenId from response
console.log(response.tokenId);
// 2. send the tokenId to the server
const result = await loginWithGoogle({ idToken: response.tokenId });
console.log("Google signin success: ", result);
} catch (error) {
console.log("Google signin error: ", error.response.data.message);
}
};
useEffect(() => {
function start() {
gapi.client.init({
clientId: process.env.REACT_APP_CLIENT_ID,
scope: "email",
});
}
gapi.load("client:auth2", start);
}, []);
return (
(
Login With Google
)}
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={"single_host_origin"}
/>
);
};
export default Google;
```
- Step-2: In the `services/AuthService` path
```js
export const loginWithGoogle = async (data) => {
const response = await axios.post(
`http://localhost:3030/api/google-login`,
data
);
return response.data;
};
```
- Step-3: In the Server site
- install `npm install google-auth-library`
```js
// google
authRoutes.post("/google-login", handleGoogleLogin);
const { OAuth2Client } = require("google-auth-library");
const jwt = require("jsonwebtoken");
const handleGoogleLogin = async (req, res) => {
try {
// creating client which help us to verify the idToken that we receive from front end
const client = new OAuth2Client(dev.app.googleClientId);
// get the idToken form react app request body
const { idToken } = req.body;
console.log("idToken ", idToken);
// lets verify the idToken
client
.verifyIdToken({ idToken, audience: dev.app.googleClientId })
.then(async (response) => {
console.log("GOOGLE LOGIN RESPONSE", response);
const { email_verified, name, email } = response.payload;
const exsitingUser = await User.findOne({ email });
if (email_verified) {
// if the user already exist in our website
if (exsitingUser) {
console.log("user exist");
// create a token for user
const token = jwt.sign(
{ _id: exsitingUser._id },
String(dev.app.jwtSecretKey),
{
expiresIn: "7d",
}
);
// step 7: create user info
const userInfo = {
_id: exsitingUser._id,
name: exsitingUser.name,
email: exsitingUser.email,
phone: exsitingUser.phone,
isAdmin: exsitingUser.isAdmin,
};
return res.json({ token, userInfo });
} else {
// if user does not exist create a new user
let password = email + dev.app.jwtSecretKey;
const newUser = new User({
name,
email,
password,
});
// console.log(newUser);
const userData = await newUser.save();
if (!userData) {
return res.status(400).send({
message: "user was not created with google",
});
}
// if user is created
const token = jwt.sign(
{ _id: userData._id },
String(dev.app.jwtSecretKey),
{
expiresIn: "7d",
}
);
// step 7: create user info
const userInfo = {
_id: userData._id,
name: userData.name,
email: userData.email,
phone: userData.phone,
isAdmin: userData.isAdmin,
};
return res.json({ token, userInfo });
}
} else {
return res.status(400).send({
message: "Google login failed try again",
});
}
});
} catch (error) {
res.send({
message: error.message,
});
}
};
```
- Step-4: Setup .env file in the server folder
```env
SERVER_PORT=8080
MONGODB_URL=
JWT_ACCOUNT_ACTIVATION_KEY=
JWT_RESET_PASSWORD_KEY=
JWT_ACCESS_TOKEN_KEY=
JWT_REFRESH_TOKEN_KEY=
SMTP_USERNAME=YOUR_GMAIL_HERE
SMTP_PASSWORD=
CLIENT_URL=
SESSION_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
```
- Step-5: Setup for secret key
```js
require("dotenv").config();
const dev = {
db: {
mongoURL:
process.env.MONGODB_URL || "mongodb://127.0.0.1:27017/database-name",
},
app: {
port: process.env.SERVER_PORT || 8000,
jwtAccountActivationKey: process.env.JWT_ACCOUNT_ACTIVATION_KEY,
jwtResetPasswordKey: process.env.JWT_RESET_PASSWORD_KEY,
jwtAcessTokenKey: process.env.JWT_ACCESS_TOKEN_KEY,
jwtRefreshTokenKey: process.env.JWT_REFRESH_TOKEN_KEY,
smtpUsername: process.env.SMTP_USERNAME,
smtpPassword: process.env.SMTP_PASSWORD,
clientUrl: process.env.CLIENT_URL,
googleClientId: process.env.GOOGLE_CLIENT_ID,
googleClientSecret: process.env.GOOGLE_CLIENT_SECRET,
},
};
module.exports = dev;
```
## Follow Me
[
](https://github.com/learnwithfair) [
](https://www.facebook.com/learnwithfair/) [
](https://www.instagram.com/learnwithfair/) [
](https://www.twiter.com/learnwithfair/) [
](https://www.youtube.com/@learnwithfair)
[youtube-shield]: https://img.shields.io/badge/-Youtube-black.svg?style=flat-square&logo=youtube&color=555&logoColor=white
[youtube-url]: https://youtube.com/@learnwithfair
[facebook-shield]: https://img.shields.io/badge/-Facebook-black.svg?style=flat-square&logo=facebook&color=555&logoColor=white
[facebook-url]: https://facebook.com/learnwithfair
[instagram-shield]: https://img.shields.io/badge/-Instagram-black.svg?style=flat-square&logo=instagram&color=555&logoColor=white
[instagram-url]: https://instagram.com/learnwithfair
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/company/learnwithfair