ssl certificate is valid but still showing error during passport js google authentication on heroku - node.js

Question

Note: it is showing this error on google chrome and authentication doesn't work on firefox
Hi. I have implemented google authentication using passport js. I am using React JS on the front end. everything is working on my localhost but after I deployed it. during authentication, it shows the "Site is not secure" error. what shall I do now? I have been searching for answers.
site link: https://popupchat.herokuapp.com/
// server.js
import express from "express";
import dotenv from "dotenv";
import path from "path";
import session from "express-session";
import passport from "passport";
import { Strategy as GoogleStrategy } from "passport-google-oauth20";
dotenv.config();
const app = express();
app.use(express.json());
app.set("trust proxy", 1);
app.use(
session({
secret: "abcdsdfdfdfffd",
resave: false,
saveUninitialized: false,
cookie: {
httpOnly: true,
maxAge: 1000 * 60 * 60 * 24 * 7, // One Week
sameSite: "none",
secure: true,
},
})
);
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser((user, done) => {
return done(null, user);
});
passport.deserializeUser((user, done) => {
return done(null, user);
});
passport.use(
new GoogleStrategy(
{
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: "/auth/google/callback",
},
function (request, accessToken, refreshToken, profile, done) {
return done(null, profile);
}
)
);
app.get(
"/auth/google",
passport.authenticate("google", { scope: ["profile", "email"] })
);
app.get(
"/auth/google/callback",
passport.authenticate("google", {
failureRedirect: "/",
session: true,
}),
function (req, res) {
res.redirect("/");
}
);
app.get("/getuser", (req, res) => {
res.send(req.user);
});
app.get("/auth/logout", (req, res) => {
if (req.user) {
req.logout();
res.send("done");
}
});
// ================== deployment ==========================
const __dirname1 = path.resolve();
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname1, "/frontend/build")));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname1, "frontend", "build", "index.html"));
});
} else {
app.get("/", (req, res) => {
res.send("API is running");
});
}
// ================== deployment ==========================
const PORT = process.env.PORT || 5000;
app.listen(PORT, console.log("server started on port 5000"));
// frontend
import { useEffect, useState } from "react";
import axios from "axios";
function Login() {
const google = () => {
window.open(`/auth/google`, "_self");
};
return (
<button type="button" onClick={google}>
Login with Google
</button>
);
}
export default Login;