I want to create google auth system in expressjs and nuxtjs for users. when in nuxtjs, we click “login with google”, it opens a popup window, and we call the express route to start google auth flow. when we get consent screen to choose google profile from which want to login, after we select, it redirects to call back url as per flow. where we store the profile data to database if it doesn’t exist and then close the login window on nuxtjs automtically.
here some problems i am facing is.
-
when we hit button, window.open starts and we get google profile list to select or login then after selecting the profile, it redirects to callback url there and store the data to database, successfully and show message in that login window that authentication successful.. but here i want this window to close automatically after this message. also i want to use the profile data in my nuxt application here by saving that in cookie or local browser.
-
another problem i am facing is session issue, it looks like. if i login to my system and i get the message authentication successful, and if i am change browser and i get the same message, even if i change computers, i do not get options to choose google account, but directly we get that message “authentication successful”.. there should be separate flow for every session, how to manage this here.
Both My Express Server & Nuxt Application hosted like this..
Express is – https://v1api.myurl.com/
NuxtJs – https://www.myurl.com
this is my app.js
const express = require('express');
const session = require('express-session');
const helmet = require('helmet');
const xss = require('xss-clean');
const mongoSanitize = require('express-mongo-sanitize');
const compression = require('compression');
const cors = require('cors');
const httpStatus = require('http-status');
const config = require('./config/config');
const morgan = require('./config/morgan');
const passport = require('./config/passport');
const { authLimiter } = require('./middlewares/rateLimiter');
const routes = require('./routes/v1');
const supplierRoutes = require('./routes/suppliers-api');
const { errorConverter, errorHandler } = require('./middlewares/error');
const ApiError = require('./utils/ApiError');
var bodyParser = require('body-parser');
const app = express();
// Configure session middleware
app.use(
session({
secret: 'SomeSecretKey',
resave: false,
saveUninitialized: false,
store: new session.MemoryStore(),
})
);
app.set('trust proxy', 1);
if (config.env !== 'test') {
app.use(morgan.successHandler);
app.use(morgan.errorHandler);
}
// enable cors
app.use(cors());
app.options('*', cors());
// set security HTTP headers
app.use(helmet());
app.use(bodyParser.json({ limit: "500mb" }));
app.use(bodyParser.urlencoded({ limit: "500mb", extended: true, parameterLimit: 500000 }));
// parse json request body
app.use(express.json({ limit: "500mb" }));
// parse urlencoded request body
app.use(express.urlencoded({ limit: "500mb", extended: true, parameterLimit: 500000 }));
// sanitize request data
app.use(xss());
app.use(mongoSanitize());
// gzip compression
app.use(compression());
// jwt authentication
app.use(passport.initialize());
app.use(passport.session());
// limit repeated failed requests to auth endpoints
if (config.env === 'production') {
app.use('/v1/auth', authLimiter);
}
// v1 api routes
app.use('/v1', routes);
app.use('/supplier-api', supplierRoutes);
// send back a 404 error for any unknown api request
app.use((req, res, next) => {
next(new ApiError(httpStatus.NOT_FOUND, 'Endpoint Not found'));
});
// convert error to ApiError, if needed
app.use(errorConverter);
// handle error
app.use(errorHandler);
module.exports = app;
this is authRoutes.js
// routes/authRoutes.js
const express = require('express');
const passport = require('passport');
const authController = require('../../controllers/authController');
const router = express.Router();
router.get('/google', authController.googleLogin);
router.get(
'/google/callback',
passport.authenticate('google', { failureRedirect: '/login' }),
authController.googleLoginCallback
);
router.post('/login', authController.login);
module.exports = router;
this is user model..
const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({
googleId: {
type: String,
required: true,
},
name: {
type: String,
required: true,
default: null,
},
email: {
type: String,
required: true,
default: null,
},
displayName: {
type: String,
default: null,
},
familyName: {
type: String,
default: null,
},
givenName: {
type: String,
default: null,
},
photos: {
type: [String],
default: [],
},
phone: {
type: String,
default: null,
},
password: {
type: String,
default: null,
},
});
module.exports = mongoose.model('User', UserSchema);
this is authController.js
// controllers/authController.js
const passport = require('passport');
const authService = require('../services/authService');
function googleLogin(req, res, next) {
passport.authenticate('google', { scope: ['profile', 'email'] })(req, res, next);
}
function googleLoginCallback(req, res) {
const user = req.user;
const responseData = {
success: true,
message: 'Authentication successful. You can now close this window.',
data: {
UserId: user._id,
Photo: user.photos[0],
DisplayName: user.displayName,
Name: user.name,
GivenName: user.givenName,
FamilyName: user.familyName,
// Include other necessary user details...
},
};
const responseHtml = `
<html>
<head>
<script>
window.onload = function() {
window.opener.postMessage(${JSON.stringify(responseData)}, window.location.origin);
};
</script>
</head>
<body>
<p>Authentication successful. You can now close this window.</p>
</body>
</html>
`;
res.send(responseHtml);
}
async function login(req, res) {
const { email, password } = req.body;
try {
const user = await authService.loginUser(email, password);
req.login(user, (err) => {
if (err) {
return res.status(500).json({ message: 'Internal server error' });
}
return res.status(200).json({ message: 'Login successful' });
});
} catch (error) {
res.status(401).json({ message: error.message });
}
}
module.exports = {
googleLogin,
googleLoginCallback,
login,
};
this is authService
// services/authService.js
const bcrypt = require('bcrypt');
const User = require('../models/User');
async function loginUser(email, password) {
const user = await User.findOne({ email });
if (!user) {
throw new Error('Invalid email or password');
}
const isPasswordValid = await bcrypt.compare(password, user.password);
if (!isPasswordValid) {
throw new Error('Invalid email or password');
}
return user;
}
module.exports = {
loginUser,
};
this is passport.js
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const User = require('./../models/User');
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser((id, done) => {
User.findById(id, (err, user) => {
done(err, user);
});
});
passport.use(
new GoogleStrategy(
{
clientID: '****************',
clientSecret: '******************',
callbackURL: 'https://v1api.myurl.com/v1/auth/google/callback',
scope: ['profile', 'email'],
},
async (accessToken, refreshToken, profile, done) => {
try {
// Access additional fields
const displayName = profile.displayName;
const familyName = profile.name.familyName;
const givenName = profile.name.givenName;
const photos = profile.photos.map((photo) => photo.value); // Extract the photo URLs
// Check if the user already exists in the database
let user = await User.findOne({ googleId: profile.id });
if (user) {
// If user exists, return the user
return done(null, user);
} else {
// If user doesn't exist, create a new user in the database
const email = profile.emails && profile.emails.length > 0 ? profile.emails[0].value : null;
user = new User({
googleId: profile.id,
name: displayName,
email,
displayName,
familyName,
givenName,
photos,
});
await user.save();
return done(null, user);
}
} catch (error) {
return done(error, null);
}
}
)
);
module.exports = passport;
this is my component in nuxtjs3 composition api.
loginButton.js
<template>
<button
class="ttc-bg-red-600 ttc-hover:bg-red-700 ttc-text-white ttc-py-2 ttc-px-4 ttc-rounded-md ttc-w-full ttc-flex ttc-items-center ttc-justify-center"
@click="loginWithGoogle"
>
<div class="ttc-mr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="ttc-h-6 ttc-w-6 inline-block">
<path d="M23.52 12c0-1.78-.16-3.51-.46-5.18H12v9.38h6.55a11.57 11.57 0 0 1-4.95 7.62v6.32h7.98c4.68-4.32 7.36-10.67 7.36-18.14z"/>
<path fill="#fff" d="M12 24c3.34 0 6.43-1.13 8.85-3.02l-3.4-2.6C17.74 19.41 15.05 21 12 21c-4.61 0-8.53-3.05-9.91-7.22l-3.3 2.7C2.51 20.9 7.04 24 12 24z"/>
<path fill="none" d="M0 0h24v24H0z"/>
</svg>
</div>
<div class="ttc-font-medium ttc-inline-block">Sign in with Google</div>
</button>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const loginWithGoogle = async () => {
const googleLoginUrl = 'https://v1api.myurl.com/v1/auth/google';
const loginWindow = window.open(googleLoginUrl, '_blank', 'width=500,height=600');
const closeListener = setInterval(() => {
if (loginWindow && loginWindow.closed) {
clearInterval(closeListener);
// Perform any necessary actions after the window is closed
fetchUserId();
}
}, 500);
};
const fetchUserId = async () => {
try {
const response = await $fetch('https://v1api.myurl.com/v1/auth/google/callback');
const data = await response.json();
const userData = data.data;
localStorage.setItem('userData', JSON.stringify(userData));
window.close();
} catch (error) {
console.error('Error fetching user Data:', error);
}
};
onMounted(() => {
return () => {
window.removeEventListener('message', handleMessage);
};
});
</script>