1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

/// <reference types="node" />
import React from "react";
import * as SecureStore from "expo-secure-store";

const GlobalContext = React.createContext({});

interface GlobalProps {
  children?: React.ReactNode;
}
export interface GlobalStates {
  userLoggedIn?: boolean;
  isLoading?: boolean;
  userToken?: string;
  setToken?: (token: string) => void;
  signOut?: () => void;
}

/**
 * A React Component with the Content Provider embedded into it.
 *
 * @remarks
 *
 * Values can also be accessed using `React.useContext(GlobalContext)` after
 * importing this file. WARNING: It must be accessed **inside** of a React
 * Component.
 */
class GlobalProvider extends React.Component<GlobalProps, GlobalStates> {
  /**
   * Class initializer, defaults, and trigger fetching token from secure
   * storage.
   *
   * @param props - Built in Props from React
   */
  constructor(props: GlobalProps) {
    super(props);
    this.state = {
      userLoggedIn: false,
      isLoading: true,
      userToken: null,
      setToken: async (token: string) => {
        _setToken(token);
      },
      signOut: async () => {
        _removeToken(token);
      },
    };
    this._getToken(); // onload, get token
  }

  render() {
    return (
      <GlobalContext.Provider
        value={{
          userToken: this.state.userToken,
          setToken: this.state.setToken,
          signOut: this.state.signOut,
          isLoading: this.state.isLoading,
          userLoggedIn: this.state.userLoggedIn,
        }}
      >
        {this.props.children}
      </GlobalContext.Provider>
    );
  }

  /**
   * Triggered on initial app launch.
   */
  async _getToken(): Promise<void> {
    try {
      const token = await SecureStore.getItemAsync("myapp_access_token");
      if (token !== null) {
        this.setState({ userToken: token });
        this.setState({ userLoggedIn: true });
      }
    } catch (error) {
      console.error(error);  // Storage Error
    }
    // signal fetching ended
    this.setState({ isLoading: false });
  }

  /**
   * Signin Flow. Set token into storage for future app launches.
   *
   * @param token - user auth token
   */
  async _setToken(token: string): Promise<void> {
    try {
      await SecureStore.setItemAsync("myapp__access_token", token);
      this.setState({ userToken: token });
      this.setState({ userLoggedIn: true });
    } catch (error) {
      console.error(error);  // Storage Error
    }
  }


  /**
   * Signout Flow. Remove token from storage, kick user back to auth
   */
  async _removeToken(): Promise<void> {
    try {
      await SecureStore.deleteItemAsync("myapp__access_token");
      this.setState({ userToken: null });
      this.setState({ userLoggedIn: false });
    } catch (error) {
      console.error(error);  // Storage Error
    }
  }
}

// break the consumer out of context so it can be used like the provider.
const GlobalConsumer = GlobalContext.Consumer;

// React Components to be placed at Root of App.
export { GlobalProvider, GlobalConsumer };

export default GlobalContext;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React from "react";

import * as SplashScreen from "expo-splash-screen";

import { GlobalProvider, GlobalConsumer } from "GlobalContext";

import Main from "Main";
import Auth from "Auth";

const App = () => {
  return (
    <GlobalProvider>
      <GlobalConsumer>
        {(ctx) => {
          if (ctx.isLoading) {
            // `expo-splash-screen` will keep the SplashScreen showing until
            // SplashScreen.hideAsync() is called
            return null;
          } else {
            SplashScreen.hideAsync();
            if (ctx.userLoggedIn === false) {
              // The "Auth" part of the App. Segmented with it's own Navigation
              return <Auth />;
            } else {
              // The "Main" part of the App. Segmented with it's own Navigation
              return <Main />;
            }
          }
        }}
      </ConfigConsumer>
    </ConfigProvider>
  );
};

export default App;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import * as React from "react";

import GlobalContext, { GlobalStates } from "GlobalContext";

import { Pressable, Text } from "react-native";

interface loginProps {
  setToken: (token: string) => void,
  username: string,
  password: string,
}

function login({username, password, setToken}: loginProps){
  try {
    // do some api call
    server_response = fetch();

    if ("token" in server_response){
      setToken(server_response["token"]);
    }
  } catch(error){
    console.error(error);
  }
}

// I'm sure this argument needs to be typed \/
export default function LoginScreen({ navigation }) {

  const [usernameState, setUsernameState] = React.useState("test_user");
  const [passwordState, setPasswordState] = React.useState("test_password");

  // get setToken function (broken up to make eslint happy)
  const context: GlobalStates = React.useContext(GlobalContext);
  const setToken = context.setToken;

  return (
    <Pressable
      onPress={() => login(usernameState, passwordState, setToken)}
    >
      <Text>Login</Text>
    </Pressable>
  )
}