Using hello.js with React.js

Question

I'd like to understand how to make Hello.js work with React.js , especially the custom event handler hello.on

As I'm new to React.js, I don't understand how to bind non React events into the app flow.

I tried putting the event handler in the componentDidMount handler

    handleClick(){
    hello('twitter').login();
}

componentDidMount(){
    hello.on('auth.login', function(auth) {

    // Call user information, for the given network
        hello(auth.network).api('/me').then(function(r) {
            console.log(r);
        });
    });
    hello.init({
    'twitter' : 'J1jqqO50tcLtLx8Js0VDitjZW'
    },
    {
          redirect_uri:'/',
          oauth_proxy: 'https://auth-server.herokuapp.com/proxy'
    });

}

thanks

Answer 1

And 3 years later:

You need a class for authentication, for example:

import * as React from "react";
import * as hello from "hellojs";
import { Event } from "../interfaces/Event";

export class Authentication extends React.Component<{}, { sendEvent: boolean }> {
  constructor(public props, public context) {
    super(props, context);
    this.state = {
      sendEvent: true
    };
  }
  public login(network) {
    hello.init({
      aad: {
        name: "Azure Active Directory",

        oauth: {
          version: 2,
          auth: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
          grant: "https://login.microsoftonline.com/common/oauth2/v2.0/token"
        },

        // Authorization scopes
        scope: {
          // you can add as many scopes to the mapping as you want here
          profile: "user.read",
          offline_access: ""
        },

        scope_delim: " ",

        login: p => {
          if (p.qs.response_type === "code") {
            // Let's set this to an offline access to return a refresh_token
            p.qs.access_type = "offline_access";
          }
        },

        base: "https://www.graph.microsoft.com/v1.0/",

        get: {
          me: "me"
        },

        xhr: p => {
          if (p.method === "post" || p.method === "put") {
            JSON.parse(p);
          } else if (p.method === "patch") {
            hello.utils.extend(p.query, p.data);
            p.data = null;
          }

          return true;
        },

        // Don't even try submitting via form.
        // This means no POST operations in <=IE9
        form: false
      }
    });
    hello.init(
      {
        aad: "ClientID"
      },
      {
        redirect_uri: "YOUR REDIRECT_URI",
        //redirect_uri: 'https://localhost:4321/temp/workbench.html',
        scope: "user.read"
      }
    );
    // By defining response type to code, the OAuth flow that will return a refresh token to be used to refresh the access token
    // However this will require the oauth_proxy server
    hello(network)
      .login({ display: "none" })
      .then(
        authInfo => {
          console.log(authInfo);
          localStorage.setItem("logged", authInfo.authResponse.access_token);
        },
        e => {
          console.error("Signin error: " + e.error.message);
        }
      );
  }
  //when the component is mounted you check the localstorage
  //logged ==> undefined you call login and save a token in localstorage
  //logged ==> with a token -> setEvent call a function that use graph api
  public componentDidMount() {
    let logged = localStorage["logged"];
    if (logged === undefined) this.login("aad");
    else {
      if (this.state.sendEvent) {
        this.props.setEvent(null);
        this.props.setEvent(Event.GET_ALL_USERS);
      }
    }
  }

  public render() {
    return null;
  }
}

the file name is auth.tsx and you can call this class in the main react class:

export class mainClass extends React.Component{
  ......
  ......
  private getEvent = (event) => {
    this.setState({ event: event });
    //HERE YOU recive the event when auth is ready
  }
  public render(){
    <Authentication setEvent={this.getEvent} />
  }
}