Skip to content

Commit 231f8c2

Browse files
hkakram97hkakram97
committed
password-less-authentication-ui-completed
1 parent 85fcbfe commit 231f8c2

File tree

9 files changed

+262
-1857
lines changed

9 files changed

+262
-1857
lines changed

‎backend/firebase/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
const firebaseAdmin = require("firebase-admin");
33

4-
const serviceAccount = require("./serviceAccountKey.json");
4+
const serviceAccount = require("./serviceAccountKey");
55

66
firebaseAdmin.initializeApp({
77
credential: firebaseAdmin.credential.cert(serviceAccount)

‎backend/firebase/serviceAccountKey.js

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docker-compose.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ services:
2727
build:
2828
context: ./frontend
2929
dockerfile: Dockerfile
30-
volumes:
31-
- ./frontend:/usr/vite-react-firebase-auth-mongodb-nodejs-expressjs-docker-compose-fe
30+
# volumes:
31+
# - ./frontend:/usr/vite-react-firebase-auth-mongodb-nodejs-expressjs-docker-compose-fe
3232
command: npm run dev
3333
ports:
3434
- 3000:3000

‎frontend/package-lock.json

Lines changed: 8 additions & 1834 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/App.jsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import SignUp from './components/signup'
1212
import Home from './components/Home'
1313
import UpdateProfile from './components/UpdateProfile'
1414
import ForgotPassword from './components/ForgotPassword'
15-
15+
import SendEmailLink from './components/SendEmailLink'
16+
import VerifyEmailLink from './components/VerifyEmailLink'
1617
// context
1718
import { AuthProvider } from './context/AuthContext'
1819

@@ -42,6 +43,12 @@ function App() {
4243
<Route path="/update-profile">
4344
<UpdateProfile />
4445
</Route>
46+
<Route path="/send-email-link">
47+
<SendEmailLink/>
48+
</Route>
49+
<Route path="/verify-email-link">
50+
<VerifyEmailLink/>
51+
</Route>
4552
</PrivateRoute>
4653
</Switch>
4754
</AuthProvider>

‎frontend/src/components/Home.jsx

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useEffect} from 'react'
1+
import React, { useEffect } from 'react'
22
import { Link, useHistory } from "react-router-dom"
33
import { useAuth } from '../context/AuthContext'
44

@@ -9,41 +9,52 @@ export default function Home() {
99
const { currentUser, logout } = useAuth()
1010
const history = useHistory()
1111

12-
useEffect(()=> {
12+
useEffect(() => {
1313
console.log('currentUser: ', currentUser);
14-
if(!currentUser) {
14+
if (!currentUser) {
1515
history.push("/signin")
1616
} else {
1717
history.push("/")
1818
}
19-
},[currentUser])
19+
}, [currentUser])
2020

2121

2222
// handle functions
23-
function handleLogout (e) {
23+
function handleLogout(e) {
2424
logout()
2525
}
26-
function handleUpdateProfile () {
26+
function handleUpdateProfile() {
2727
history.push('/update-profile')
2828
}
29-
29+
function handleSendEmailLink() {
30+
history.push({
31+
pathname: '/send-email-link',
32+
state: {
33+
btnName: "Send Email Link"
34+
}
35+
})
36+
}
3037
return (
3138
<div>
3239
{
33-
currentUser?
34-
(
35-
<div>
36-
<h1>My home</h1>
37-
<Button variant="contained" color="primary" onClick={handleLogout}>
38-
Logout
40+
currentUser ?
41+
(
42+
<div>
43+
<h1>My home</h1>
44+
<Button variant="contained" color="primary" onClick={handleLogout}>
45+
Logout
46+
</Button>
47+
<br />
48+
<Button variant="contained" color="secondary" onClick={handleUpdateProfile}>
49+
Update profile
3950
</Button>
40-
<br/>
41-
<Button variant="contained" color="secondary" onClick={handleUpdateProfile}>
42-
Update profile
51+
<br />
52+
<Button variant="contained" color="secondary" onClick={handleSendEmailLink}>
53+
Send Email Link
4354
</Button>
44-
</div>
45-
):
46-
<h1>Loading...</h1>
55+
</div>
56+
) :
57+
<h1>Loading...</h1>
4758
}
4859
</div>
4960
)

‎frontend/src/components/SendEmailLink.jsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { useState } from 'react';
2+
import Avatar from '@material-ui/core/Avatar';
3+
import Button from '@material-ui/core/Button';
4+
import CssBaseline from '@material-ui/core/CssBaseline';
5+
import TextField from '@material-ui/core/TextField';
6+
import Link from '@material-ui/core/Link';
7+
import Box from '@material-ui/core/Box';
8+
import EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';
9+
import Typography from '@material-ui/core/Typography';
10+
import { makeStyles } from '@material-ui/core/styles';
11+
import Container from '@material-ui/core/Container';
12+
import { useHistory } from "react-router-dom";
13+
14+
15+
function Copyright() {
16+
return (
17+
<Typography variant="body2" color="textSecondary" align="center">
18+
{'Copyright © '}
19+
<Link color="inherit" href="https://material-ui.com/">
20+
Your Website
21+
</Link>{' '}
22+
{new Date().getFullYear()}
23+
{'.'}
24+
</Typography>
25+
);
26+
}
27+
28+
const useStyles = makeStyles((theme) => ({
29+
paper: {
30+
marginTop: theme.spacing(8),
31+
display: 'flex',
32+
flexDirection: 'column',
33+
alignItems: 'center',
34+
},
35+
avatar: {
36+
margin: theme.spacing(1),
37+
backgroundColor: theme.palette.secondary.main,
38+
},
39+
form: {
40+
width: '100%', // Fix IE 11 issue.
41+
marginTop: theme.spacing(1),
42+
},
43+
submit: {
44+
margin: theme.spacing(3, 0, 2),
45+
},
46+
}));
47+
48+
export default function SendEmailLink(props) {
49+
const history = useHistory()
50+
const classes = useStyles();
51+
52+
//handle function
53+
function handleSubmit() {
54+
history.push({
55+
pathname: '/verify-email-link',
56+
state: {
57+
btnName: "Verify Email Link"
58+
}
59+
})
60+
}
61+
return (
62+
<Container component="main" maxWidth="xs">
63+
<CssBaseline />
64+
<div className={classes.paper}>
65+
<Avatar className={classes.avatar}>
66+
<EmailOutlinedIcon />
67+
</Avatar>
68+
<Typography component="h1" variant="h5">
69+
Send Email Link
70+
</Typography>
71+
<form className={classes.form} onSubmit={handleSubmit} noValidate>
72+
<TextField
73+
variant="outlined"
74+
margin="normal"
75+
required
76+
fullWidth
77+
id="email"
78+
label="Email Address"
79+
name="email"
80+
autoComplete="email"
81+
autoFocus
82+
/>
83+
<Button
84+
type="submit"
85+
fullWidth
86+
variant="contained"
87+
color="primary"
88+
className={classes.submit}
89+
>
90+
{history?.location?.state?.btnName}
91+
</Button>
92+
</form>
93+
</div>
94+
<Box mt={8}>
95+
<Copyright />
96+
</Box>
97+
</Container>
98+
);
99+
}

‎frontend/src/components/VerifyEmailLink.jsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { useState } from 'react';
2+
import Avatar from '@material-ui/core/Avatar';
3+
import Button from '@material-ui/core/Button';
4+
import CssBaseline from '@material-ui/core/CssBaseline';
5+
import TextField from '@material-ui/core/TextField';
6+
import FormControlLabel from '@material-ui/core/FormControlLabel';
7+
import Checkbox from '@material-ui/core/Checkbox';
8+
import Link from '@material-ui/core/Link';
9+
import Grid from '@material-ui/core/Grid';
10+
import Box from '@material-ui/core/Box';
11+
import EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';
12+
import Typography from '@material-ui/core/Typography';
13+
import { makeStyles } from '@material-ui/core/styles';
14+
import Container from '@material-ui/core/Container';
15+
import { useHistory } from "react-router-dom"
16+
17+
18+
function Copyright() {
19+
return (
20+
<Typography variant="body2" color="textSecondary" align="center">
21+
{'Copyright © '}
22+
<Link color="inherit" href="https://material-ui.com/">
23+
Your Website
24+
</Link>{' '}
25+
{new Date().getFullYear()}
26+
{'.'}
27+
</Typography>
28+
);
29+
}
30+
31+
const useStyles = makeStyles((theme) => ({
32+
paper: {
33+
marginTop: theme.spacing(8),
34+
display: 'flex',
35+
flexDirection: 'column',
36+
alignItems: 'center',
37+
},
38+
avatar: {
39+
margin: theme.spacing(1),
40+
backgroundColor: theme.palette.secondary.main,
41+
},
42+
form: {
43+
width: '100%', // Fix IE 11 issue.
44+
marginTop: theme.spacing(1),
45+
},
46+
submit: {
47+
margin: theme.spacing(3, 0, 2),
48+
},
49+
}));
50+
51+
export default function VerifyEmailLink(props) {
52+
const history = useHistory()
53+
const classes = useStyles();
54+
55+
function handleSubmit() {
56+
history.push('/')
57+
}
58+
59+
return (
60+
<Container component="main" maxWidth="xs">
61+
<CssBaseline />
62+
<div className={classes.paper}>
63+
<Avatar className={classes.avatar}>
64+
<EmailOutlinedIcon />
65+
</Avatar>
66+
<Typography component="h1" variant="h5">
67+
Verify Email Link
68+
</Typography>
69+
<form className={classes.form} onSubmit={handleSubmit} noValidate>
70+
<TextField
71+
variant="outlined"
72+
margin="normal"
73+
required
74+
fullWidth
75+
id="email"
76+
label="Email Address"
77+
name="email"
78+
autoComplete="email"
79+
autoFocus
80+
/>
81+
82+
<Button
83+
type="submit"
84+
fullWidth
85+
variant="contained"
86+
color="primary"
87+
className={classes.submit}
88+
89+
>
90+
{history?.location?.state?.btnName}
91+
</Button>
92+
</form>
93+
</div>
94+
<Box mt={8}>
95+
<Copyright />
96+
</Box>
97+
</Container>
98+
);
99+
}

‎package-lock.json

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)