GithubLogin.js

    0

    1

    The GitHubLogin class defines several properties: buttonText, className, clientId, onRequest, onSuccess, and onFailure. The class also defines a defaultProps object to hold the user's default values for these properties.

    onBtnClick is a function that is invoked when the user clicks the "Sign in with GitHub" button. onRequest is invoked when the user hits the "Sign in with GitHub" button's submit button. onSuccess is invoked when GitHub signs the user in, and onFailure is invoked when something goes wrong during sign-in.

    render() is invoked when the user hits the "Sign in with GitHub" button's submit button. If the user is already logged in, render() simply returns the existing "Sign in with GitHub" button. Otherwise, render() creates a new PopupWindow instance and opens it in the current window.

    The onRequest() function, if defined, is invoked when the user hits the "Sign in with GitHub" button's submit button. onRequest() simply invokes the this.props.onRequest() function.

    The onSuccess() function is invoked when GitHub validates the user's login and issues a code back to the user. onSuccess()

    Library: react

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import PopupWindow from './PopupWindow';
    import { toQuery } from './utils';
    
    class GitHubLogin extends Component {
      static propTypes = {
        buttonText: PropTypes.string,
        children: PropTypes.node,
        className: PropTypes.string,
        clientId: PropTypes.string.isRequired,
        onRequest: PropTypes.func,
        onSuccess: PropTypes.func,
        onFailure: PropTypes.func,
        redirectUri: PropTypes.string,
        scope: PropTypes.string,
      }
    
      static defaultProps = {
        buttonText: 'Sign in with GitHub',
        redirectUri: '',
        scope: 'user:email',
        onRequest: () => {},
        onSuccess: () => {},
        onFailure: () => {},
      }
    
      onBtnClick = () => {
        const { clientId, scope, redirectUri } = this.props;
        const search = toQuery({
          client_id: clientId,
          scope,
          redirect_uri: redirectUri,
        });
        const popup = this.popup = PopupWindow.open(
          'github-oauth-authorize',
          `https://github.com/login/oauth/authorize?${search}`,
          { height: 1000, width: 600 }
        );
    
        this.onRequest();
        popup.then(
          data => this.onSuccess(data),
          error => this.onFailure(error)
        );
      }
    
      onRequest = () => {
        this.props.onRequest();
      }
    
      onSuccess = (data) => {
        if (!data.code) {
          return this.onFailure(new Error('\'code\' not found'));
        }
    
        this.props.onSuccess(data);
      }
    
      onFailure = (error) => {
        this.props.onFailure(error);
      }
    
      render() {
        const { className, buttonText, children } = this.props;
        const attrs = { onClick: this.onBtnClick };
    
        if (className) {
          attrs.className = className;
        }
    
        return <button {...attrs}>{ children || buttonText }</button>;
      }
    }
    
    export default GitHubLogin;
    
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.