Google oAuth (following Stephen Grider's course Modern React Redux on Udemy)

A. React Google oAuth.md

React Google oAuth

actions.js

import {
  SIGN_IN,
  SIGN_OUT
} from './types';

export const signIn = (userId) => {
  return {
    type: SIGN_IN,
    payload: userId
  };
};

export const signOut = () => {
  return {
    type: SIGN_OUT,
  };
};

authReducer.js

import {
  SIGN_OUT,
  SIGN_IN
} from '../actions/types';

const INITIAL_STATE = {
  isSignedIn: null,
  userId: null
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SIGN_IN: {
      return {
        ...state,
        isSignedIn: true,
        userId: action.payload
      }
    }

    case SIGN_OUT: {
      return {
        ...state,
        isSignedIn: false,
        userId: null
      }
    }

    default:
      return state;
  }
};

GoogleAuthNoRedux.js

import React, {Component} from 'react';

const API_KEY= process.env.REACT_APP_GAPI;

class GoogleAuth extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isSignedIn: null
    }
  }

  componentDidMount() {
    window.gapi.load('client:auth2', () => {
      window.gapi.client.init({
        clientId: `${API_KEY}`,
        scope: 'email'
      }).then(() => {
        this.auth = window.gapi.auth2.getAuthInstance();
        this.setState({
          isSignedIn: this.auth.isSignedIn.get()
        });
        this.auth.isSignedIn.listen(this.onAuthChange);
      });
    })
  };

  onAuthChange = () => {
    this.setState({
      isSignedIn: this.auth.isSignedIn.get()
    })
  };

  onSignInClick = () => {
    this.auth.signIn();
  };

  onSignOutClick = () => {
    this.auth.signOut();
  };

  renderAuthButton() {
    if(this.state.isSignedIn === null) {
      return null;
    } else if(this.state.isSignedIn) {
      return (
        <button onClick={this.onSignOutClick} className={'ui red google button'}>
          <i className={'google icon'}/>
          Sign Out
        </button>
      );
    }

    return (
      <button onClick={this.onSignInClick} className={'ui red google button'}>
        <i className={'google icon'}/>
        Sign In with Google
      </button>
    );
  };

  render() {
    return(
      <div>
        {this.renderAuthButton()}
      </div>
    );
  };
}

export default GoogleAuth;

GoogleAuthRedux.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { signIn, signOut } from "../actions";

const API_KEY= process.env.REACT_APP_GAPI;

class GoogleAuth extends Component {

  componentDidMount() {
    window.gapi.load('client:auth2', () => {
      window.gapi.client.init({
        clientId: `${API_KEY}`,
        scope: 'email'
      }).then(() => {
        this.auth = window.gapi.auth2.getAuthInstance();
        this.onAuthChange(this.auth.isSignedIn.get());
        this.auth.isSignedIn.listen(this.onAuthChange);
      });
    })
  };

  onAuthChange = (isSignedIn) => {
    if(isSignedIn) {
      this.props.signIn(this.auth.currentUser.get().getId());
    } else {
      this.props.signOut();
    }
  };

  onSignInClick = () => {
    this.auth.signIn();
  };

  onSignOutClick = () => {
    this.auth.signOut();
  };

  renderAuthButton() {
    if(this.props.isSignedIn === null) {
      return null;
    } else if(this.props.isSignedIn) {
      return (
        <button onClick={this.onSignOutClick} className={'ui red google button'}>
          <i className={'google icon'}/>
          Sign Out
        </button>
      );
    }

    return (
      <button onClick={this.onSignInClick} className={'ui red google button'}>
        <i className={'google icon'}/>
        Sign In with Google
      </button>
    );
  };

  render() {
    return(
      <div>
        {this.renderAuthButton()}
      </div>
    );
  };
}

const mapStateToProps = (state) => {
  return {
    isSignedIn: state.auth.isSignedIn
  }
};

export default connect(mapStateToProps, {signIn, signOut})(GoogleAuth);

Note: classes come from Semantic UI