<file_sep>import * as Msal from "msal";
import { msalConfig } from "./conf";

const loginRequest = {
  scopes: ["openid", "profile", "User.Read"]
};

const graphConfig = {
  graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
};

const myMSALObj = new Msal.UserAgentApplication(msalConfig);

const callMSGraph = (endpoint, token, callback) => {
  const headers = new Headers();
  const bearer = `Bearer ${token}`;

  headers.append("Authorization", bearer);

  const options = {
    method: "GET",
    headers: headers
  };

  alert("request made to Graph API at: " + new Date().toString());

  fetch(endpoint, options)
    .then(response => response.json())
    .then(response => callback(response, endpoint))
    .catch(error => alert(JSON.stringify(error)));
};

const updateUI = (data, endpoint) => {
  alert(JSON.stringify(data));
  alert(endpoint);
};

export const signIn = () => {
  alert("signing in");
  myMSALObj
    .loginPopup(loginRequest)
    .then(loginResponse => {
      alert("success");
      alert("id_token acquired at: " + new Date().toString());
      alert(JSON.stringify(loginResponse));

      if (myMSALObj.getAccount()) {
        alert(JSON.stringify(myMSALObj.getAccount()));
      } else {
        alert("did get account");
      }
    })
    .catch(error => {
      alert("error");
      alert(JSON.stringify(error));
    });
};

export const signOut = () => {
  myMSALObj.logout();
};

function getTokenPopup(request) {
  return myMSALObj.acquireTokenSilent(request).catch(error => {
    alert(JSON.stringify(error));
    alert("silent token acquisition fails. acquiring token using popup");

    // fallback to interaction when silent call fails
    return myMSALObj
      .acquireTokenPopup(request)
      .then(tokenResponse => {
        return tokenResponse;
      })
      .catch(error => {
        alert(JSON.stringify(error));
      });
  });
}

export const seeProfile = () => {
  if (myMSALObj.getAccount()) {
    getTokenPopup(loginRequest)
      .then(response => {
        callMSGraph(
          graphConfig.graphMeEndpoint,
          response.accessToken,
          updateUI
        );
      })
      .catch(error => {
        alert(JSON.stringify(error));
      });
  } else {
    alert("not loggedin, please login first");
  }
};
<file_sep>import React, { useState, Component } from "react";
import { Button, StyleSheet, View } from "react-native";
import { signIn, seeProfile, signOut } from "./helpers";

const App = () => {
  return (
    <View style={styles.app}>
      <View style={styles.header} />
      <Button onPress={() => signIn()} title="Login" />
      <br />
      <Button onPress={() => seeProfile()} title="See Profile" />
      <br />
      <Button onPress={() => signOut()} title="Logout" />
    </View>
  );
};

const styles = StyleSheet.create({
  app: {
    marginHorizontal: "auto",
    maxWidth: 500
  },
  logo: {
    height: 80
  },
  header: {
    padding: 20
  },
  title: {
    fontWeight: "bold",
    fontSize: "1.5rem",
    marginVertical: "1em",
    textAlign: "center"
  },
  text: {
    lineHeight: "1.5em",
    fontSize: "1.125rem",
    marginVertical: "1em",
    textAlign: "center"
  },
  link: {
    color: "#1B95E0"
  },
  code: {
    fontFamily: "monospace, monospace"
  }
});

export default App;
