Continued updating the e-mail verification and I think I managed to get it working

This commit is contained in:
Tiago Ribeiro
2023-09-26 11:28:10 +01:00
parent 3491efb494
commit 8fb1d8e886
8 changed files with 922 additions and 97 deletions

View File

@@ -27,6 +27,7 @@
"eslint": "8.33.0", "eslint": "8.33.0",
"eslint-config-next": "13.1.6", "eslint-config-next": "13.1.6",
"firebase": "9.19.1", "firebase": "9.19.1",
"firebase-admin": "^11.10.1",
"formidable": "^3.5.0", "formidable": "^3.5.0",
"formidable-serverless": "^1.1.1", "formidable-serverless": "^1.1.1",
"framer-motion": "^9.0.2", "framer-motion": "^9.0.2",

View File

@@ -0,0 +1,13 @@
{
"type": "service_account",
"project_id": "mti-ielts",
"private_key_id": "22b783a14c760d1215a8d1f5de0fa40a33a840e7",
"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDoNkd7s/izUBRb\nlmJYWl0xk4X9wEVJU4LKA4HPeha8RFDse4T4suVP08oCP9ODSXF5A83+IqXNMs/N\na7PtFABBAx433JrB7I4NsAUrDSjI4LeYEIqh6YzHsQvBU53HAmPChX525S4i0IBy\ncNnyXut0nmlHz5ZwCPXgqg4eN44C+m0f7sxzivcnPth/zLupnMiDAHFZrxQolWO2\n6JfozMWGw0TmCkUxngzeGBMVYmsGiKRIxEi3MWeuwjYjGO4nR1krEUlcpjCbx4UX\nxYXicJb17HOs9LTcSh9bpDWZPHKXR48hxd2cMLr+XQzw7Otwu2p8fEUOJ+CiTyNz\nlkN9p7OhAgMBAAECggEAB5DsMZdGu1X4wdazr+AK4RCG2UKkZ0wbqvgkCMX4O2xo\n7BmmtqFCmEAk+P+KJWEVW81wTu9jUl0tWOrBVzBThUrEF2seVkL+SmshsfpI6cmr\npb5lO/sTgZau1L7kGU3GQRpvKVHUl+EODFyJt2xZFOjL8qFsjAw4sbgsw1aJT6a4\nFilm6Gapi1qSKOPSlXVmi0NJ9DUtNbKaQK8/coqEJRizeXs9MORvzyKQaV8PBmWI\noEnkxahKOD48U2kmI7rT9/YsCuaP2BlGdLxvANXLjAKcrDccVZkYEH82tPtCicED\noow3i956HPdWSXQgUOU65MfGccjOmqGaGa4zUTICyQKBgQD6zLMwL9YS+n9EKZaK\nEbzRybN2d+eKbXyDJzkDi6FnSGVre2ndShsimoOtwZDLmOF/XhN79YOLJVbI124p\npAWO+WxAfe9Xy3iFEBmL4kSREA873Sd8EN5OfYS2DsN7IbjZkoaLuM8QlyXL9ZRS\nBJDVGjx+wFKRjnClcBNbVMMXiQKBgQDtBumKZS0ZCtJuBeuwLGJ1ZJtYECykIrsD\nUtQ7zxwXJzPGqZ2c5JLpHdDm/bb9nllpLsh4SpDRqxFa2H2FF8x5KWaS7JQUsS8e\ner6x5wUt6wAJqV/ZvttVrLZCa8VYn+K7bTANnkPNJZHTqBTJbxkXMDTtkwWXUN2z\nQP3N9lodWQKBgFBHiewYw9ubV3WIImnbt6cne0ymoPUMitioi3V5Epcu81fuTzrI\nZ9sxvoi19xVUwIm2oWICerLlptvvKZImsKjNajtSlHRz6wYc2zCNowkULOwqpGLw\nO1jAkOR94VDewH7UikDbTVywJSceWvXOBFZSaZ7hDQ0OnTw3ndqUTUaRAoGAd2BG\n2PPyDa28o7sJpBYGlJdSAb1LrnLre1YJHAJIZITS99hPUEhykUP6BYx80CkjYO01\n/BeZ7m9Y80cbmJ+O1Or8BT1vqyg90f0B8/mlSyYTQ8pxQupz7ydoN/WtU+BawgjQ\n7drqzPSCCHab2YPBwEMANTMZ2sbYkcJG0aekZSkCgYBbnFJm8kUy57isxHyvrci+\nR30KQl2Y9okPytF8PpLH+yNjLDoduTOHL/hZoFC0M4Gklx4wPKpsEhImIrWmG9VC\n0UrQC6TT1WoY6/S3YehVmTXo/nBPD1XTUcbF/xxUrWDjmMjnt1IlXBbIzUPD3U4P\niRXzHnXb7yi+/iRxSDts2w==\n-----END PRIVATE KEY-----\n",
"client_email": "firebase-adminsdk-dyg6p@mti-ielts.iam.gserviceaccount.com",
"client_id": "104980563453519094431",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-dyg6p%40mti-ielts.iam.gserviceaccount.com",
"universe_domain": "googleapis.com"
}

View File

@@ -1,5 +1,7 @@
import {initializeApp} from "firebase/app"; import {initializeApp} from "firebase/app";
import {getFirestore} from "firebase/firestore"; import * as admin from "firebase-admin/app";
const serviceAccount = require("@/constants/serviceAccountKey.json");
const firebaseConfig = { const firebaseConfig = {
apiKey: process.env.FIREBASE_PUBLIC_API_KEY || "", apiKey: process.env.FIREBASE_PUBLIC_API_KEY || "",
@@ -11,4 +13,10 @@ const firebaseConfig = {
measurementId: process.env.FIREBASE_MEASUREMENT_ID || "", measurementId: process.env.FIREBASE_MEASUREMENT_ID || "",
}; };
export const app = initializeApp(firebaseConfig); export const app = initializeApp(firebaseConfig, Math.random().toString());
export const adminApp = admin.initializeApp(
{
credential: admin.cert(serviceAccount),
},
Math.random().toString(),
);

View File

@@ -1,5 +1,4 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import {User} from "@/interfaces/user";
import {toast, ToastContainer} from "react-toastify"; import {toast, ToastContainer} from "react-toastify";
import axios from "axios"; import axios from "axios";
import {FormEvent, useEffect, useState} from "react"; import {FormEvent, useEffect, useState} from "react";
@@ -7,10 +6,9 @@ import Head from "next/head";
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
import {Divider} from "primereact/divider"; import {Divider} from "primereact/divider";
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import {BsArrowRepeat, BsCheck} from "react-icons/bs"; import {BsArrowRepeat} from "react-icons/bs";
import Link from "next/link"; import Link from "next/link";
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import clsx from "clsx";
import {useRouter} from "next/router"; import {useRouter} from "next/router";
export function getServerSideProps({query, res}: {query: {oobCode: string; mode: string; apiKey?: string; continueUrl?: string}; res: any}) { export function getServerSideProps({query, res}: {query: {oobCode: string; mode: string; apiKey?: string; continueUrl?: string}; res: any}) {
@@ -23,6 +21,8 @@ export function getServerSideProps({query, res}: {query: {oobCode: string; mode:
}; };
} }
console.log(query.continueUrl);
return { return {
props: { props: {
code: query.oobCode, code: query.oobCode,
@@ -36,7 +36,6 @@ export function getServerSideProps({query, res}: {query: {oobCode: string; mode:
export default function Reset({code, mode, apiKey, continueUrl}: {code: string; mode: string; apiKey?: string; continueUrl?: string}) { export default function Reset({code, mode, apiKey, continueUrl}: {code: string; mode: string; apiKey?: string; continueUrl?: string}) {
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [email, setEmail] = useState<string>();
const router = useRouter(); const router = useRouter();
@@ -45,35 +44,33 @@ export default function Reset({code, mode, apiKey, continueUrl}: {code: string;
redirectIfFound: true, redirectIfFound: true,
}); });
const verifyEmail = (e: any) => { useEffect(() => {
e.preventDefault(); if (mode === "signIn") {
axios
.post<{ok: boolean}>("/api/reset/verify", {
email: continueUrl?.replace("https://encoach.com/", ""),
})
.then((response) => {
if (response.data.ok) {
toast.success("Your account has been verified!", {toastId: "verify-successful"});
setTimeout(() => {
router.push("/");
}, 1000);
return;
}
setIsLoading(true); toast.error("Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!", {
axios toastId: "verify-error",
.post<{ok: boolean}>("/api/reset/verify", { });
link: `https://encoach.com/action?apiKey=${apiKey}&mode=${mode}&oobCode=${code}&continueUrl=${continueUrl}`, })
email: email?.trim(), .catch(() => {
}) toast.error("Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!", {
.then((response) => { toastId: "verify-error",
if (response.data.ok) { });
toast.success("Your account has been verified!", {toastId: "verify-successful"}); setIsLoading(false);
setTimeout(() => {
router.push("/");
}, 1000);
return;
}
toast.error("Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!", {
toastId: "verify-error",
}); });
}) }
.catch(() => { });
toast.error("Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!", {
toastId: "verify-error",
});
setIsLoading(false);
});
};
const login = (e: FormEvent<HTMLFormElement>) => { const login = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@@ -148,29 +145,12 @@ export default function Reset({code, mode, apiKey, continueUrl}: {code: string;
<p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">to your registered Email Address</p> <p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">to your registered Email Address</p>
</div> </div>
<Divider className="max-w-xs lg:max-w-md" /> <Divider className="max-w-xs lg:max-w-md" />
<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={verifyEmail}> <div className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2">
{isLoading && ( <span className="text-center">
<span className="text-center"> Your e-mail is currently being verified, please wait a second. <br /> <br />
Your e-mail is currently being verified, please wait a second. <br /> <br /> Once it has been verified, you will be redirected to the home page.
Once it has been verified, you will be redirected to the home page. </span>
</span> </div>
)}
{!isLoading && (
<>
<span>Please enter your e-mail to verify it</span>
<Input
name="email"
type="email"
defaultValue={email}
required
label="E-mail address"
placeholder="Enter your e-mail address"
onChange={setEmail}
/>
<Button className="w-full">Submit</Button>
</>
)}
</form>
</section> </section>
)} )}
</main> </main>

View File

@@ -1,6 +1,7 @@
import {NextApiRequest, NextApiResponse} from "next"; import {NextApiRequest, NextApiResponse} from "next";
import {getAuth, sendSignInLinkToEmail, User} from "firebase/auth"; import {getAuth, sendEmailVerification, sendSignInLinkToEmail, User} from "firebase/auth";
import {app} from "@/firebase"; import {getAuth as getAdminAuth, UserRecord} from "firebase-admin/auth";
import {app, adminApp} from "@/firebase";
import {sessionOptions} from "@/lib/session"; import {sessionOptions} from "@/lib/session";
import {withIronSessionApiRoute} from "iron-session/next"; import {withIronSessionApiRoute} from "iron-session/next";
@@ -11,7 +12,7 @@ export default withIronSessionApiRoute(sendVerification, sessionOptions);
async function sendVerification(req: NextApiRequest, res: NextApiResponse) { async function sendVerification(req: NextApiRequest, res: NextApiResponse) {
if (req.session.user) { if (req.session.user) {
sendSignInLinkToEmail(auth, req.session.user.email, { sendSignInLinkToEmail(auth, req.session.user.email, {
url: "https://encoach.com/", url: `https://encoach.com/${req.session.user.email}`,
handleCodeInApp: true, handleCodeInApp: true,
}) })
.then(() => res.status(200).json({ok: true})) .then(() => res.status(200).json({ok: true}))

View File

@@ -1,32 +1,26 @@
import {NextApiRequest, NextApiResponse} from "next"; import {NextApiRequest, NextApiResponse} from "next";
import {getAuth, signInWithEmailLink} from "firebase/auth"; import {getAuth} from "firebase-admin/auth";
import {app} from "@/firebase"; import {adminApp, app} from "@/firebase";
import {sessionOptions} from "@/lib/session"; import {sessionOptions} from "@/lib/session";
import {withIronSessionApiRoute} from "iron-session/next"; import {withIronSessionApiRoute} from "iron-session/next";
import {doc, getFirestore, setDoc} from "firebase/firestore"; import {doc, getFirestore, setDoc} from "firebase/firestore";
const auth = getAuth(app); const auth = getAuth(adminApp);
const db = getFirestore(app); const db = getFirestore(app);
export default withIronSessionApiRoute(verify, sessionOptions); export default withIronSessionApiRoute(verify, sessionOptions);
async function verify(req: NextApiRequest, res: NextApiResponse) { async function verify(req: NextApiRequest, res: NextApiResponse) {
const {link, email} = req.body as {link: string; email: string}; const {email} = req.body as {email: string};
console.log("HERE FOR WHEN VERIFY: ", {link, email}); const user = await auth.getUserByEmail(email);
if (!user) {
res.status(404).json({ok: false});
return;
}
signInWithEmailLink(auth, email, link) const userRef = doc(db, "users", user.uid);
.then(async () => { await setDoc(userRef, {isVerified: true}, {merge: true});
const userRef = doc(db, "users", req.session.user!.id);
await setDoc(userRef, {isVerified: true}, {merge: true});
req.session.user = {...req.session.user!, isVerified: true}; res.status(200).json({ok: true});
await req.session.save();
res.status(200).json({ok: true});
})
.catch((e) => {
console.log("HERE FOR WHEN FAIL VERIFY: ", e);
res.status(404).json({ok: false});
});
} }

View File

@@ -1,14 +1,14 @@
import {PERMISSIONS} from "@/constants/userPermissions"; import {PERMISSIONS} from "@/constants/userPermissions";
import {app} from "@/firebase"; import {app, adminApp} from "@/firebase";
import {User} from "@/interfaces/user"; import {User} from "@/interfaces/user";
import {sessionOptions} from "@/lib/session"; import {sessionOptions} from "@/lib/session";
import {getAuth} from "firebase/auth";
import {deleteDoc, doc, getDoc, getFirestore} from "firebase/firestore"; import {deleteDoc, doc, getDoc, getFirestore} from "firebase/firestore";
import {getAuth} from "firebase-admin/auth";
import {withIronSessionApiRoute} from "iron-session/next"; import {withIronSessionApiRoute} from "iron-session/next";
import {NextApiRequest, NextApiResponse} from "next"; import {NextApiRequest, NextApiResponse} from "next";
const auth = getAuth(app);
const db = getFirestore(app); const db = getFirestore(app);
const auth = getAuth(adminApp);
export default withIronSessionApiRoute(user, sessionOptions); export default withIronSessionApiRoute(user, sessionOptions);
@@ -49,9 +49,10 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
return; return;
} }
await auth.deleteUser(id);
await deleteDoc(doc(db, "users", id)); await deleteDoc(doc(db, "users", id));
res.json({...user, id: req.session.user.id}); res.json({ok: true});
} }
async function get(req: NextApiRequest, res: NextApiResponse) { async function get(req: NextApiRequest, res: NextApiResponse) {

859
yarn.lock

File diff suppressed because it is too large Load Diff