auth.tsx

import * as React from 'react';
import { createContext } from '../lib/context-utils';

interface User {
  [key: string]: any // idk yet
}

interface Auth {
  token: string
  user: User
}

export const AuthContext = createContext('authContext', {
  auth: undefined as Auth | undefined,
  login: undefined as ((auth: Auth) => void) | undefined,
  logout: undefined as (() => void) | undefined
})

interface Props {
  children?: React.ReactNode
}

interface State {
  auth: Auth | undefined
}

class AuthProvider extends React.PureComponent<Props, State> {
  readonly state: State = {
    auth: undefined,
  }

  login = (auth: Auth) => {
    this.setState({ auth })
  }

  logout = () => {
    this.setState({ auth: undefined })
  }

  render() {
    return (
      <AuthContext.Provider value={this.authContext}>
        {this.props.children}
      </AuthContext.Provider>
    )
  }

  get authContext() {
    return {
      auth: this.state.auth,
      login: this.login,
      logout: this.logout,
    }
  }
}

export default AuthProvider