Sign In / Sign Up Template

firebase.js

import * as firebase from 'firebase/app'
import 'firebase/auth'
import {
    FIREBASE_APIKEY,
    FIREBASE_APPID,
    FIREBASE_AUTHDOMAIN,
    FIREBASE_DATABASEURL,
    FIREBASE_MEASUREMENTID,
    FIREBASE_MESSAGINGSENDERID,
    FIREBASE_PROJECTID,
    FIREBASE_STORAGEBUCKET,
} from '../constants'

const firebaseConfig = {
    apiKey: FIREBASE_APIKEY,
    authDomain: FIREBASE_AUTHDOMAIN,
    databaseURL: FIREBASE_DATABASEURL,
    projectId: FIREBASE_PROJECTID,
    storageBucket: FIREBASE_STORAGEBUCKET,
    messagingSenderId: FIREBASE_MESSAGINGSENDERID,
    appId: FIREBASE_APPID,
    measurementId: FIREBASE_MEASUREMENTID,
}

firebase.initializeApp(firebaseConfig)

export default firebase

signin.js

import React, { useCallback, useEffect, useState } from 'react';
import { useHistory, withRouter } from "react-router-dom";
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 Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { FacebookLoginButton } from "react-social-login-buttons";

import firebase from "../utils/firebase";
import Routes from "../constants/routes";

import api from "../api"


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(3),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),
    },
    or: {
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 12,
    },

    github: {
        width: '100% !important',
        margin: '0 !important',
    },

    githubText: {
        fontSize: '14px !important',
        fontWeight: 'bold',
        justifyContent: 'center',
    }
}));

const SignIn = () => {
    const classes = useStyles();
    const history = useHistory();

    const [userCredential, setUserCredential] = useState({
        email: '',
        password: '',
    })

    useEffect(() => {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                // user signed in
            } else {
                // user not signed in
            }
        })
    }, [])

    const handleChange = useCallback(e => {
        const name = e.target.name;
        const value = e.target.value;
        setUserCredential(cred => ({ ...cred, [name]: value }))
    }, [])

    const setAPIToToken = useCallback(
        async fb => {
            const idToken = await fb.user.getIdToken()
            if (!idToken) {
                console.warn('[Firebase error]: idToken is not provided')
                return
            }
            api.setToken(idToken)
        },
        [],
    )

    const handleSignUpWithFacebook = useCallback(async () => {
        const provider = new firebase.auth.FacebookAuthProvider()

        try {
            const currentUser = await firebase.auth().currentUser

            const res = currentUser
                ? await currentUser.linkWithPopup(provider)
                : await firebase.auth().signInWithPopup(provider)

            await setAPIToToken(res)

            if (!currentUser) {
                const firebaseUser = res.user
                console.log('firebaseUser: ', firebaseUser)
            } else {
                // maybe get user through API
            }
        } catch (err) {
            // error handling
            console.error(err)
        }
    }, [setAPIToToken])


    const handleSubmit = useCallback(
        async e => {
            e.preventDefault()

            const { email, password } = userCredential

            try {
                const res = await firebase
                    .auth()
                    .signInWithEmailAndPassword(email, password)

                await setAPIToToken(res)
                history.push("/dashboard");
            } catch (e) {
                // error handling
                console.error(e)
            }
        },
        [setAPIToToken, userCredential, history],
    )

    return (
        <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                    <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                    Log In
                </Typography>
                <form className={classes.form} noValidate autoComplete="off" onSubmit={handleSubmit}>
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                            <TextField
                                variant="outlined"
                                required
                                fullWidth
                                id="email"
                                label="Email Address"
                                name="email"
                                value={userCredential.email}
                                autoComplete="email"
                                onChange={handleChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                variant="outlined"
                                required
                                fullWidth
                                name="password"
                                label="Password"
                                type="password"
                                id="password"
                                value={userCredential.password}
                                autoComplete="current-password"
                                onChange={handleChange}
                            />
                        </Grid>
                    </Grid>

                    <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={classes.submit}
                    >
                        Signin
                    </Button>

                    <Grid item xs={12}>
                        <div className={classes.or}>or</div>
                    </Grid>
                </form>

                <Grid container spacing={2}>
                    <Grid item xs={12}>
                        <FacebookLoginButton
                            className={classes.github}
                            onClick={handleSignUpWithFacebook}>
                            <span className={classes.githubText}>Sign in with Facebook</span>
                        </FacebookLoginButton>
                    </Grid>

                    <Grid container justify="flex-end">
                        <Grid item>
                            <Link href={Routes.SIGN_UP} variant="body2">
                                Don't have an account? Sign up
                            </Link>
                        </Grid>
                    </Grid>
                </Grid>
            </div>
        </Container>
    );
}

export default withRouter(SignIn);

signup.js

import React, { useCallback, useEffect, useState } from 'react';
import { withRouter, useHistory } from "react-router-dom";
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 Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { FacebookLoginButton } from "react-social-login-buttons";

import firebase from "../utils/firebase";

import Routes from "../constants/routes"

import api from "../api"

import { API_URL } from "../constants";

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(3),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),
    },
    or: {
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 12,
    },

    github: {
        width: '100% !important',
        margin: '0 !important',
    },

    githubText: {
        fontSize: '14px !important',
        fontWeight: 'bold',
        justifyContent: 'center',
    }
}));

const SignUp = () => {
    const classes = useStyles();
    const history = useHistory();

    const [state, setState] = useState({
        email: '',
        password: '',
    })

    useEffect(() => {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                // user signed in
            } else {
                // user not signed in
            }
        })
    }, [])

    const handleChange = useCallback(e => {
        const name = e.target.name;
        const value = e.target.value;
        setState(s => ({ ...s, [name]: value }))
    }, [])

    const createUser = useCallback(
        async params => {
            return await api.post(`${API_URL}/api/users`, params)
        },
        [],
    )

    const setAPIToToken = useCallback(
        async fb => {
            const idToken = await fb.user.getIdToken()
            if (!idToken) {
                console.warn('[Firebase error]: idToken is not provided')
                return
            }
            api.setToken(idToken)
        },
        [],
    )

    const handleSignUpWithFacebook = useCallback(async () => {
        const provider = new firebase.auth.FacebookAuthProvider()

        try {
            const currentUser = await firebase.auth().currentUser

            const res = currentUser
                ? await currentUser.linkWithPopup(provider)
                : await firebase.auth().signInWithPopup(provider)

            await setAPIToToken(res)

            if (!currentUser) {
                const firebaseUser = res.user
                const user = await createUser({
                    email: firebaseUser.email,
                    uuid: firebaseUser.uid,
                })
                console.log(user);
            } else {
                // maybe get user through API
            }
        } catch (err) {
            // error handling
            console.error(err)
        }
    }, [createUser, setAPIToToken])


    const handleSubmit = useCallback(
        async e => {
            e.preventDefault()

            const { email, password } = state

            try {
                const res = await firebase
                    .auth()
                    .createUserWithEmailAndPassword(email, password)

                await setAPIToToken(res)

                const firebaseUser = res.user
                const user = await createUser({
                    email: firebaseUser.email,
                    uuid: firebaseUser.uid,
                })
                console.log(user);
                history.push(Routes.ONBOARDING);
            } catch (e) {
                // error handling
                console.error(e)
            }
        },
        [createUser, setAPIToToken, state, history],
    )

    return (
        <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                    <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                    Sign up
                </Typography>
                <form className={classes.form} noValidate autoComplete="off" onSubmit={handleSubmit}>
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                            <TextField
                                variant="outlined"
                                required
                                fullWidth
                                id="email"
                                label="Email Address"
                                name="email"
                                value={state.email}
                                autoComplete="email"
                                onChange={handleChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                variant="outlined"
                                required
                                fullWidth
                                name="password"
                                label="Password"
                                type="password"
                                id="password"
                                value={state.password}
                                autoComplete="current-password"
                                onChange={handleChange}
                            />
                        </Grid>
                    </Grid>

                    <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={classes.submit}
                    >
                        Sign Up
                    </Button>

                    <Grid item xs={12}>
                        <div className={classes.or}>or</div>
                    </Grid>
                </form>

                <Grid container spacing={2}>
                    <Grid item xs={12}>
                        <FacebookLoginButton
                            className={classes.github}
                            onClick={handleSignUpWithFacebook}>
                            <span className={classes.githubText}>Sign up with Facebook</span>
                        </FacebookLoginButton>
                    </Grid>

                    <Grid container justify="flex-end">
                        <Grid item>
                            <Link href={Routes.SIGN_IN} variant="body2">
                                Already have an account? Sign in
                            </Link>
                        </Grid>
                    </Grid>
                </Grid>
            </div>
        </Container>
    );
}

export default withRouter(SignUp);