diff --git a/backend/firebase/serviceAccountKey.js b/backend/firebase/serviceAccountKey.js
new file mode 100644
index 0000000..2be62d5
--- /dev/null
+++ b/backend/firebase/serviceAccountKey.js
@@ -0,0 +1,12 @@
+module.exports = {
+ "type": "service_account",
+ "project_id": "vite-react-auth-dev",
+ "private_key_id": "33b8ff47d4e6f0842593b4a1788704be65d2df57",
+ "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCO98O3RU6YtWJP\nNi4agH3polNbfNVflO+lS/nLrDyGi4W4tnFE9cilX/G879Fsc5oF29IK81MhzuVE\nSV9NnJJtbehRqt0T8kNbuNnmKTWv5ULoxex88iShbK0FsXZiMN9C7P+cHC3NWdSx\nuJpdDzSn20C8XQ/Bwn262O+7gDQsEAV1YPZAe68p92+3bmmOFi5oLR7/4YKEKw5Q\n6jSsp3soCsPHOMOuQjPDzu3SwzdgaM4P4iqXKiUIBoQp3lTu+ikenggkpOGDtQ39\n3E3yXmIwND2wAJJQimhM8jy/GVSfSEDby0nR0hyU4+t/xjrJeqCbEf+9tT55X5sm\nZVaLl5BdAgMBAAECggEACKPHc5VgJRFdEg1jpt1Z/pr9L5uxJ1gQTWx0eY78j2Ly\nH1IDMVgrGndcW/8gKE4qIi2BGYFP5kyjBUfr1vxdyvgn4HuTZaev02St4l9eK7WO\noBOJ8ZkOhqTTJfNuBIwQifJZlh0L1YuWs3DE/1eyZmx1Eo0LLTnsMDT489tRC9KK\n6HYI0EWA2CT6AYMZYnlZK6Z/fbmWTOKXTNsspzi/DnUuYEMSTk9GcGi10JW0sIBT\nSfd0H2DbpiaRzxfUPJePHuw0/72kr1oqGkG4JlKfkTwJF575THlrej9YEKa8EwOV\noVnJfyQdxYB/ZySd9dGseqwPVnIHGznOqILg1zygAQKBgQDEYLpwo4p500nd60rP\n/TxKNZYSQ4CTaC54FlF95ijL3pZj+/AMkmf3BSEQZW1YaJjvbiljIXq1HwT7bSYT\nRUB0OTAzuU3qeYY5+KZU8nSsedTkxd8M92cRZhjMAXhXPoBnuNBUwczE3DwQlhRG\ns3O0WeGnHgu6yTnw1kmcucSwAQKBgQC6X8vVMgKOZo7r1ty7CzJGYh7gxHQQuRja\npuZPx+xj582V9vNbItxKJTfab0XzxKZaZSwe1Eji/4SwF2X7oerZrTRvnoYn39J+\nzMLCzDeKm5sFCUhG2KfBDzH5hARKu+kQHZ7jzw1UxcrMXDNaSIiA3jmfA7LZ7nbL\nOb24ESOgXQKBgQCW9TB85ArQCY8P7A7vgeB1v2mkkoVlS0HliGqOmH4l8e6z33ix\ngV4wMp4vJ3j97DIcZBemn5bfYoAG8unBCIw6i7e1Gy59H3wCVlUumc78ww7X6g/D\nvO9bHZvUPxEOJ/q3QQfND8lkT1RQ/72Id+xq6GkheWRU6tkCfQfLVbaQAQKBgDIv\nP2St7bBIf22T0qXu8t+u5h+h5prmLIIb9OJAtC+GqH4cHBVLQsQYV3zS/6QPLLgk\njAfVI7c0FJeSBV0HkYSBth/kML2l8DlCi6MGeGIzWj+16ydgiXNb0xob6UfyZ2R2\nhWVUSIOuKthyb0V9SHxi2mMuDMfQBV7dsm9Q9iXlAoGBALpTadjDEh2r/0BnB3h3\nQ7kJFmGws2UJBbFkDpmKMJnCEhVDxW+kD/YCC2mTviY0dQsRKWW4hDK/Zh9Ty9mB\ntWHw019ZROU25BXk1dzUpAfYuhx+bRiS/IF61YtRBmPrHU9cuQ5sg+UoVDFPAVH7\n0CjresH07JL9V+vCEqXqTUpF\n-----END PRIVATE KEY-----\n",
+ "client_email": "firebase-adminsdk-ixso7@vite-react-auth-dev.iam.gserviceaccount.com",
+ "client_id": "111975858975714184198",
+ "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-ixso7%40vite-react-auth-dev.iam.gserviceaccount.com"
+}
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 26b453e..4430769 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -12,13 +12,14 @@ import SignUp from './components/signup'
import Home from './components/Home'
import UpdateProfile from './components/UpdateProfile'
import ForgotPassword from './components/ForgotPassword'
-
+import SendVerifyLink from './components/SendVerifyLink'
// context
import { AuthProvider } from './context/AuthContext'
// Route
import PrivateRoute from './route/PrivateRoute'
+
function App() {
return (
@@ -26,7 +27,7 @@ function App() {
<AuthProvider>
<Switch>
<Route path="/signin">
- <SignIn/>
+ <SignIn />
</Route>
<Route path="/signup">
<SignUp />
@@ -34,14 +35,20 @@ function App() {
<Route path="/forgot-password">
<ForgotPassword />
</Route>
-
+
<PrivateRoute>
<Route exact path="/">
- <Home/>
+ <Home />
</Route>
<Route path="/update-profile">
<UpdateProfile />
</Route>
+ <Route path="/send-email-link">
+ <SendVerifyLink btnName={'Send Email Link'} status={true} />
+ </Route>
+ <Route path="/verify-email-link">
+ <SendVerifyLink btnName={'Verify Email Link'} status={false} />
+ </Route>
</PrivateRoute>
</Switch>
</AuthProvider>
diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx
index 40ef15d..e401861 100644
--- a/frontend/src/components/Home.jsx
+++ b/frontend/src/components/Home.jsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from 'react'
import { Link, useHistory } from "react-router-dom"
import { useAuth } from '../context/AuthContext'
@@ -9,41 +9,52 @@ export default function Home() {
const { currentUser, logout } = useAuth()
const history = useHistory()
- useEffect(()=> {
+ useEffect(() => {
console.log('currentUser: ', currentUser);
- if(!currentUser) {
+ if (!currentUser) {
history.push("/signin")
} else {
history.push("/")
}
- },[currentUser])
+ }, [currentUser])
// handle functions
- function handleLogout (e) {
+ function handleLogout(e) {
logout()
}
- function handleUpdateProfile () {
+ function handleUpdateProfile() {
history.push('/update-profile')
}
-
+ function handleSendEmailLink() {
+ history.push({
+ pathname: '/send-email-link',
+ state: {
+ btnName: "Send Email Link"
+ }
+ })
+ }
return (
<div>
{
- currentUser?
- (
- <div>
- <h1>My home</h1>
- <Button variant="contained" color="primary" onClick={handleLogout}>
- Logout
+ currentUser ?
+ (
+ <div>
+ <h1>My home</h1>
+ <Button variant="contained" color="primary" onClick={handleLogout}>
+ Logout
+ </Button>
+ <br />
+ <Button variant="contained" color="secondary" onClick={handleUpdateProfile}>
+ Update profile
</Button>
- <br/>
- <Button variant="contained" color="secondary" onClick={handleUpdateProfile}>
- Update profile
+ <br />
+ <Button variant="contained" color="secondary" onClick={handleSendEmailLink}>
+ Send Email Link
</Button>
- </div>
- ):
- <h1>Loading...</h1>
+ </div>
+ ) :
+ <h1>Loading...</h1>
}
</div>
)
diff --git a/frontend/src/components/SendVerifyLink.jsx b/frontend/src/components/SendVerifyLink.jsx
new file mode 100644
index 0000000..a426fed
--- /dev/null
+++ b/frontend/src/components/SendVerifyLink.jsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import TextField from '@material-ui/core/TextField';
+import Link from '@material-ui/core/Link';
+import Box from '@material-ui/core/Box';
+import EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import { useHistory } from "react-router-dom";
+
+
+function Copyright() {
+ return (
+ <Typography variant="body2" color="textSecondary" align="center">
+ {'Copyright © '}
+ <Link color="inherit" href="https://material-ui.com/">
+ Your Website
+ </Link>{' '}
+ {new Date().getFullYear()}
+ {'.'}
+ </Typography>
+ );
+}
+
+const useStyles = makeStyles((theme) => ({
+ paper: {
+ marginTop: theme.spacing(8),
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ avatar: {
+ margin: theme.spacing(1),
+ backgroundColor: theme.palette.secondary.main,
+ },
+ form: {
+ width: '100%', // Fix IE 11 issue.
+ marginTop: theme.spacing(1),
+ },
+ submit: {
+ margin: theme.spacing(3, 0, 2),
+ },
+}));
+
+export default function SendVerifyLink(props) {
+ const { btnName, status } = props;
+ const history = useHistory()
+ const classes = useStyles();
+
+ //handle function
+
+ function sendEmail() {
+ history.push({
+ pathname: '/verify-email-link'
+ })
+ };
+ function verifyEmail() {
+ history.push({
+ pathname: '/'
+ })
+ };
+
+ function handleSubmit() {
+ (status === true) ? sendEmail() : verifyEmail()
+
+ }
+ return (
+ <Container component="main" maxWidth="xs">
+ <CssBaseline />
+ <div className={classes.paper}>
+ <Avatar className={classes.avatar}>
+ <EmailOutlinedIcon />
+ </Avatar>
+ <Typography component="h1" variant="h5">
+ {btnName}
+ </Typography>
+ <form className={classes.form} onSubmit={handleSubmit} noValidate>
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id="email"
+ label="Email Address"
+ name="email"
+ autoComplete="email"
+ autoFocus
+ />
+ <Button
+ type="submit"
+ fullWidth
+ variant="contained"
+ color="primary"
+ className={classes.submit}
+ >
+ {btnName}
+ </Button>
+ </form>
+ </div>
+ <Box mt={8}>
+ <Copyright />
+ </Box>
+ </Container>
+ );
+}
\ No newline at end of file