mobileapp/screens/Intro.js

import React, { useEffect } from 'react';
import { ImageBackground, StyleSheet, View, TouchableOpacity, Image } from 'react-native';
import { ActivityIndicator, Text, } from 'react-native-paper'
import 'react-native-get-random-values';
import * as AuthSession from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';
import { useAuthState } from '../contexts/AuthContext';
import * as SecureStore from 'expo-secure-store';
import axios from 'axios';
import jwt_decode from 'jwt-decode';
import { API_URL, OAUTH_CLIENT_ID } from '../globals';

WebBrowser.maybeCompleteAuthSession();

const issuer = API_URL + "/o";

const discovery = {
  authorizationEndpoint: issuer + "/authorize",
  tokenEndpoint: issuer + "/token",
  revocationEndpoint: issuer + "/revoke",
};

const Intro = ({navigation}) => {
  const {authDispatch, authState} = useAuthState();

  const redirectUri = AuthSession.makeRedirectUri({
    scheme: OAUTH_CLIENT_ID,
    path: 'callback'
  });

  const goToRegistration = () => {
      navigation.navigate("Registration");
  }

  const login = async () => {
    const request = await AuthSession.loadAsync({
      clientId: OAUTH_CLIENT_ID,
      responseType: AuthSession.ResponseType.Code,
      usePKCE: true,
      redirectUri,
      scopes: ['openid'],
    },
    discovery)

    const result = await request.promptAsync();
    authDispatch({type: 'INITIATE_LOGIN'});
    if (result.type == "success") {
      const tokenParams = new URLSearchParams();
      tokenParams.append('grant_type', 'authorization_code');
      tokenParams.append('client_id', 'atlas.clicknpush');
      tokenParams.append('code', result.params.code);
      tokenParams.append('redirect_uri', redirectUri);
      tokenParams.append('code_verifier', request.codeVerifier);  

      try {
        const response = await axios.post(`http://10.0.0.151:8000/o/token/`, tokenParams, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });

        const tokenResponse = response.data;
        const idToken = jwt_decode(tokenResponse.id_token);
        const accessToken = tokenResponse.access_token;
        const refreshToken = tokenResponse.refresh_token;
        
        
        await SecureStore.setItemAsync('accessToken', accessToken);
        authDispatch({type: "SET_ACCESS_TOKEN", payload: accessToken});
        authDispatch({type: "SET_ID_TOKEN", payload: idToken});
        authDispatch({type: "SET_REFRESH_TOKEN", payload: refreshToken});
      } 
      catch (error) {
        console.log(error.response.data);
      }
    }
    else {
      authDispatch({type: 'CANCEL_LOGIN'});
      console.log(result);
    }
  }

  return(
    
      <ImageBackground style={styles.container} source={require('../assets/cover.jpg')}>
        {!authState.isLoading ?
        <>
          <View style={[styles.brandContainer, styles.center]}>
              <Image style={styles.logo} source={require('../assets/logo-white.png')}></Image>
              <Text style={[styles.center, styles.title]} >Click & Push</Text>
          </View>
          <View style={styles.btnContainer}>
            <TouchableOpacity style={styles.loginBtn} onPress={login} >
                <Text style={{ color: 'white', fontSize: 15 }}>Login</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.registerBtn} onPress={goToRegistration} >
                <Text style={{ color: 'white', fontSize: 15 }}>Create Account</Text>
            </TouchableOpacity>
          </View>
          </> : 
          <View style={{alignContent: 'center', height: '100%', margin: 50}}>
            <Text style={{marginTop: 50, marginBottom: 100, color: 'white', fontSize: 20}}>Hang on a moment while we sign you in.</Text>
            <ActivityIndicator size={50} animating={true} color="white" />
          </View> }
      </ImageBackground>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    resizeMode: 'cover',
    justifyContent: 'space-between'
  },

  center: {
    alignItems: 'center',  
    justifyContent: 'center',
  },

  brandContainer: {
      flex: 2,
      marginVertical: 50,
      flexDirection: 'column',
      justifyContent: 'space-between'
  },

  title: {
    fontFamily: 'RacingSansOne-Regular',
    marginTop: 30, 
    color: 'white',
    fontSize: 30
  },

  textContainer: { 
    marginHorizontal: 20,
    borderRadius: 50,
  },

  textInput: {
    marginBottom: 10,
    paddingLeft: 30,
    borderRadius: 50,
    overflow: 'hidden',
    backgroundColor: 'white',
    height: 50
  },

  loginBtn: {
    borderRadius: 50,
    width: '75%',
    justifyContent: 'center',
    backgroundColor: '#df3f3f',
    height: 60,
    marginBottom: 20,
    alignItems: 'center'
  },

  registerBtn: {
    width: '75%',
    borderColor: 'white',
    borderWidth: 2,
    borderRadius: 50,
    justifyContent: 'center',
    backgroundColor: 'transparent',
    height: 60,
    alignItems: 'center'
  },

  btnContainer: {
    flex: 1,
    alignItems: 'center',
  },
})
 
export default Intro;