View withAuthorization.js
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import auth from '../api/firebase';
import * as routes from '../constants/routes';
// This HOC redirects to the LANDING route if the condition isn't true.
// It's mainly used to redirect to the LANDING route if the user isn't signed in.
const withAuthorization = (condition, route = routes.LANDING) => (Component) => {
View routes.js
export const LANDING = '/';
export const HOME = '/home';
export const HANDLE_SIGN_IN = '/handleSignIn';
export const PROFILE = '/profile';
View App.js
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import * as routes from './constants/routes';
import Landing from './components/Landing';
import Home from './components/Home';
import Profile from './components/Profile';
import PageNotFound from './components/NotFound';
import HandleSignIn from './components/HandleSignIn';
import Navigation from './components/Navigation';
View HandleSignIn.js
import React from 'react';
import PropTypes from 'prop-types';
import { signIn } from '../api/session';
class HandleSignIn extends React.Component {
componentDidMount() {
const url = window.location.href;
let email = JSON.parse(localStorage.getItem('emailForSignIn'));
View session.js
export const signIn = (email, url) =>
new Promise((res, rej) => {
auth
.signInWithEmailLink(email, url)
.then(() => {
res('Signed in successfully!');
})
.catch((err) => {
console.error(err);
if (err.code === ARG_ERROR) {
View HandleSignIn.js
import React from 'react';
import PropTypes from 'prop-types';
import { signIn } from '../api/session';
class HandleSignIn extends React.Component {
componentDidMount() {
const url = window.location.href;
let email = JSON.parse(localStorage.getItem('emailForSignIn'));
View Landing.js
import React from 'react';
import { sendSignInLink } from '../api/session';
class Landing extends React.Component {
state = {
email: '',
result: '',
};
handleChange = (e) => {
View session.js
import auth from './firebase';
import * as routes from '../constants/routes';
import { INVALID_EMAIL, NETWORK_FAIL } from '../constants/errors';
const { REACT_APP_DOMAIN } = process.env;
const actionCodeSettings = {
url: `${REACT_APP_DOMAIN}${routes.HANDLE_SIGN_IN}`,
handleCodeInApp: true,
};
View session.js
export const WRONG_PASS = 'auth/wrong-password';
export const USER_DISABLED = 'auth/user-disabled';
export const USER_NOT_FOUND = 'auth/user-not-found';
export const EMAIL_USED = 'auth/email-already-in-use';
export const INVALID_EMAIL = 'auth/invalid-email';
export const WEAK_PASS = 'auth/weak-password';
export const NETWORK_FAIL = 'auth/network-request-failed';
export const ARG_ERROR = 'auth/argument-error';
export const INVALID_ACTION_CODE = 'auth/invalid-action-code';
View session.js
import auth from './firebase';
import * as routes from '../constants/routes';
const { REACT_APP_DOMAIN } = process.env;
const actionCodeSettings = {
url: `${REACT_APP_DOMAIN}${routes.HANDLE_SIGN_IN}`,
handleCodeInApp: true
};