be-components 0.1.1 → 0.1.3

package/src/ApiOverrides/index.ts

@@ -0,0 +1,135 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import axios from 'axios';
+import moment from 'moment-mini';
+import { v4 } from 'uuid';
+import type { AuthStateProps } from './types';
+
+const ENVIRONMENT_ENDPOINTS = {
+    DEVELOPMENT: {
+        AUTH_SVC_API: 'http://localhost:5000',
+        VOUCH_ID: 'adqEZph8t*_NBFy6u_l4!t~Hin6kpK'
+    },
+    STAGING: {
+        AUTH_SVC_API: 'https://stage-be-auth-svc.herokuapp.com',
+        VOUCH_ID: 'adqEZph8t*_NBFy6u_l4!t~Hin6kpK'
+    },
+    PRODUCTION: {
+        AUTH_SVC_API: 'https://api.players.bettoredge.com',
+        VOUCH_ID: 'Q3tmJ3r9FnkN*n-MqS-!j0NS*k!mdo'
+    }
+}
+
+let ENDPOINTS:{ [key:string]: string } = {}
+
+let auth_state:AuthStateProps = {
+    authenticated:false,
+    distinct_id: ''
+}
+
+export { APIOverrides }
+
+const APIOverrides = {
+    start: async(env:'PRODUCTION'|'STAGING'|'DEVELOPMENT', no_cache?:boolean):Promise<{ authenticated:boolean, access_token?:string, refresh_token?:string, expire_datetime?:any, distinct_id:string }> => {
+        APIOverrides.setEnvironment(env);
+        let distinct_id = await APIOverrides.getDistinctID();
+        auth_state = { authenticated: false, distinct_id }
+        if(no_cache){ return auth_state }
+        let cached_token = await AsyncStorage.getItem('access_token');
+        if(!cached_token){ return { authenticated: false, distinct_id } }
+        let cached_refresh_token = await AsyncStorage.getItem('refresh_token');
+        if(!cached_refresh_token){ return { authenticated: false, distinct_id } }
+        let expire_datetime = await AsyncStorage.getItem('auth_expire_time');
+        if(!expire_datetime){ return { authenticated:false, distinct_id } }
+        if(moment().isAfter(moment(expire_datetime))){
+            //Try to get a new one
+            const refresh_resp = await APIOverrides.refreshToken(cached_refresh_token, distinct_id);
+            if(!refresh_resp){ 
+                //This failed - so lets clear out our stored tokens
+                await AsyncStorage.removeItem('access_token');
+                await AsyncStorage.removeItem('refresh_token');
+                await AsyncStorage.removeItem('auth_expire_time');
+                return { authenticated: false, distinct_id }
+            }
+            cached_token = refresh_resp.access_token
+            cached_refresh_token = refresh_resp.refresh_token
+            expire_datetime = refresh_resp.expire_datetime
+            await AsyncStorage.setItem('access_token', cached_token);
+            await AsyncStorage.setItem('refresh_token', cached_refresh_token);
+            await AsyncStorage.setItem('auth_expire_time', expire_datetime);
+        }
+        APIOverrides.setBearerToken(cached_token);
+        APIOverrides.setRefreshTokenInterceptor(cached_refresh_token, distinct_id)
+        auth_state = {
+            authenticated: true,
+            distinct_id,
+            access_token: cached_token,
+            refresh_token: cached_refresh_token,
+            expire_datetime
+        }
+        return auth_state
+    },
+    setEnvironment: (env:'PRODUCTION'|'STAGING'|'DEVELOPMENT') => {
+        ENDPOINTS = ENVIRONMENT_ENDPOINTS[env]
+    },
+    getEndpoints: () => {
+        return ENDPOINTS
+    },
+    cacheTokens: async(access_token:string, refresh_token?:string, expire_datetime?:any) => {
+        await AsyncStorage.setItem('access_token', access_token);
+        if(refresh_token){ await AsyncStorage.setItem('refresh_token', refresh_token) }
+        if(expire_datetime){ await AsyncStorage.setItem('auth_expire_time', expire_datetime) }
+    },
+    getDistinctID: async() => {
+        let distinct_id = await AsyncStorage.getItem('distinct_id');
+        if(!distinct_id){
+            distinct_id = v4();
+            AsyncStorage.setItem('distinct_id', distinct_id);
+        }
+        return distinct_id
+    },
+    setBearerToken: (token?:string) => {
+        if (token) {
+            axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+        } else {
+            delete axios.defaults.headers.common['Authorization'];
+        }
+    },
+    refreshToken: async(token:string, distinct_id:string):Promise<{refresh_token:string, access_token:string, expire_datetime:string } | undefined> => {
+        try {
+            let AUTH_SVC_API = ENDPOINTS['AUTH_SVC_API']
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/tokens/token/refresh`, { refresh_token:token, device_id:distinct_id })
+            return resp.data
+        } catch (error) {
+            return undefined
+        }
+
+    },
+    setRefreshTokenInterceptor: async(token:string, distinct_id:string, cache?:boolean) => {
+        //Set the endpoint based on the environment that is past        
+        axios.interceptors.response.use((response) => {
+            return response
+        }, async (error) => {
+            const originalRequest = error.config;
+            //If the user gets a 403 - sign them out if they haven't been signed out yet
+            if(error?.response?.status === 403) {
+                //if(store.getState().auth.isAuthenticated){ store.dispatch(auth_logout()); throw new Error(error);  } 
+                return Promise.reject({ message: 'Authenication session has expired.' })
+            }
+            //If the user gets a 401 - check for a refresh_token and attempt to get another access token to use the request
+            if(error?.response?.status === 401 && !originalRequest._retry) {
+                originalRequest._retry = true;
+                let refresh_resp = await APIOverrides.refreshToken(token, distinct_id);
+                if(!refresh_resp){
+                    return Promise.reject({ message: 'Unable to authenticate request' })
+                }
+                const { access_token, refresh_token, expire_datetime } = refresh_resp;
+                APIOverrides.setBearerToken(access_token)
+                if(cache){
+                    await APIOverrides.cacheTokens(access_token, refresh_token, expire_datetime);
+                }
+                return Promise.resolve(axios({ ...originalRequest, headers: { ...originalRequest.headers, Authorization: `Bearer ${access_token}` }}));
+            }
+            return Promise.reject(error)
+        })
+    }
+}

package/src/ApiOverrides/types.d.ts

@@ -0,0 +1,7 @@
+export interface AuthStateProps {
+    authenticated:boolean,
+    distinct_id:string,
+    access_token?:string,
+    refresh_token?:string,
+    expire_datetime?:any
+}

package/src/Authenticator/Components/LoginForm.tsx

@@ -0,0 +1,298 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity } from "react-native"
+import { Button, Icons, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import { AuthenticateApi, AuthenticateHelpers } from '../api';
+
+
+type LoginFormProps = {
+    visible:boolean,
+    width:number,
+    onRegister: () => void,
+    onAuthenticated: (access_token:string, refresh_token:string, expire_datetime:any) => void
+}
+
+
+const attribute_options = ['username', 'email', 'phone']
+const LoginForm = ({ width, visible, onRegister, onAuthenticated }:LoginFormProps) => {
+    const [ authenticated, setAuthenticated ] = useState(false);
+    const [ auth_check, setAuthCheck ] = useState<{
+        loading:boolean,
+        attribute: 'username'|'email'|'phone',
+        value:string
+    }>({
+        loading:false,
+        attribute:'username',
+        value:'james'
+    });
+    const [ halted, setHalted ] = useState(false);
+    const [ login_try, setLoginTry ] = useState<{
+        pass_token: string,
+        loading:boolean,
+        visible:boolean,
+        verification_session_id?:string,
+        type: 'token' | 'password',
+        error?:string
+    }>({
+        pass_token: '',
+        loading:false,
+        visible:false,
+        type: 'password'
+    })
+    const [ auth_check_error, setAuthCheckError ] = useState<string>();
+    
+    const { loading, attribute, value } = auth_check
+    const { pass_token, type, verification_session_id } = login_try;
+
+    const handleAuthCheck = async() => {
+        console.log(authenticated)
+        if(loading){ return } //No mashy mashy
+        setAuthCheck({ ...auth_check, loading:true })
+        const { result, message, verification_session_id, next } = await AuthenticateApi.authCheck(attribute, value);
+        if(result == 'fail'){
+            setAuthCheckError(message)
+        } else {
+            setLoginTry({
+                pass_token: '',
+                verification_session_id: verification_session_id,
+                visible:true,
+                loading:false,
+                type: next ?? 'password'
+            })
+        }
+        setAuthCheck({ ...auth_check, loading:false })
+    }
+
+    const handleForgot = async() => {
+        const resp = await AuthenticateApi.authForgot(attribute, value)
+        if(resp.result == 'fail'){
+            setAuthCheckError(resp.message)
+        } else {
+            setLoginTry({
+                pass_token: '',
+                verification_session_id: resp.verification_session_id,
+                visible:true,
+                loading:false,
+                type: resp.next ?? 'password'
+            })
+        }
+    }
+
+    const handleLogin = async() => {
+        setLoginTry({ ...login_try, loading:true })
+        const { result, message, access_token, refresh_token, expire_datetime } = await AuthenticateApi.authLogin(attribute, value, pass_token, verification_session_id)
+        if(result == 'fail' || !access_token || !refresh_token){
+            setLoginTry({ ...login_try, error:message, loading:false })
+            setHalted(true)
+            return setTimeout(() => {
+                setHalted(false);
+            }, 5000);
+        }
+        setLoginTry({ ...login_try, loading:false, error:undefined })
+        setAuthenticated(true)
+        return onAuthenticated(access_token, refresh_token, expire_datetime)
+    }
+
+    const getAttributeIcon = () => {
+        switch(attribute){
+            case 'email': return <Icons.EmailIcon size={20} color={Colors.brand.midnight}/>
+            case 'phone': return <Icons.PhoneIcon size={20} color={Colors.brand.midnight} />
+            case 'username': return <Icons.UserIcon size={20} color={Colors.brand.midnight} />
+            default: return <Icons.UserIcon size={20} color={Colors.brand.midnight} />
+        }
+    }
+
+    const { valid } = AuthenticateHelpers.isAttributeValid(attribute, value);
+    const login_valid = pass_token.length > 0 && !halted ? true : false;
+
+    if(!visible){ return <></> }
+
+    return (
+        <View style={{ flex:1, width }}>
+            {!login_try.visible ?
+            <View style={{ flex:1 }}>
+                <View style={{ padding:30 }}>
+                    <View>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold'>Login Using My:</Text>
+                    </View>
+                    <View nativeID='attribute_toggle' style={{ marginTop:10, flexDirection:'row', borderRadius:22, borderWidth:1, backgroundColor:Colors.shades.shade400, borderColor:Colors.shades.shade600 }}>
+                        {attribute_options.map((a,i) => {
+                            const selected = a == attribute ? true : false
+                            return (
+                                <Button
+                                    style={{ flex:1 }}
+                                    title={a.toUpperCase()}
+                                    borderRadiusOverride={{
+                                        borderTopLeftRadius: i == 0 ? 22 : 0,
+                                        borderBottomLeftRadius: i == 0 ? 22 : 0,
+                                        borderTopRightRadius: i == attribute_options.length -1 ? 22 : 0,
+                                        borderBottomRightRadius: i == attribute_options.length -1 ? 22 : 0,
+                                    }}
+                                    title_color={selected ? Colors.shades.white : Colors.brand.electric}
+                                    padding={15}
+                                    title_weight={selected ? 'bold' : 'regular'}
+                                    backgroundColor={selected ? Colors.brand.electric : 'transparent'}
+                                    onPress={() => setAuthCheck({ attribute:a as 'username'|'email'|'phone', value: '', loading:false })}
+                                />
+                            )
+                        })}
+                    </View>
+                </View>
+                <View style={{ flex:1 }}>
+                <View style={{ backgroundColor:Colors.shades.shade100, borderRadius:8, padding:30 }}>
+                    <View style={{  marginBottom:10 }}>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold'>ENTER {attribute.toUpperCase()}</Text>
+                        <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>Please enter your {attribute} to continue.</Text>
+                    </View>
+                    <View style={{ marginTop:5, flexDirection:'row', alignItems:'center', borderRadius:22, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <View style={{ paddingLeft:10, paddingRight:15 }}>
+                            {getAttributeIcon()}
+                        </View>
+                        <TextInput
+                            style={{ flex:1 }}
+                            value={value}
+                            placeholder={attribute.toUpperCase()}
+                            autoFocus={true}
+                            placeholderTextColor={Colors.brand.slate}
+                            onChangeText={(text) => {
+                                setAuthCheck({ ...auth_check, value: text })
+                            }}
+                        />
+                        <View style={{ padding:10 }}>
+                            { valid ?
+                            <Icons.CheckCirlceIcon color={Colors.utility.success} size={14} />
+                            :
+                            <Icons.AlertIcon color={Colors.utility.warning} size={14} />
+                            }
+                        </View>
+                    </View>
+                    {auth_check_error ?
+                        <TouchableOpacity style={{ marginTop:10, padding:10, backgroundColor:Colors.shades.white, borderRadius:8 }} onPress={() => onRegister()}>
+                            <Text size={14} color={Colors.utility.error} weight='semibold' textAlign='center'>{auth_check_error}</Text>
+                            <Text style={{ marginTop:5 }} size={14} color={Colors.brand.electric} weight='bold' textAlign='center'>SIGN UP HERE</Text>
+                        </TouchableOpacity>
+                    :<></>}
+                    </View>
+                </View>
+                <View style={{ padding:20 }}>
+                    <Button
+                        title='LOGIN'
+                        style={{ opacity:!valid||loading?0.5:1 }}
+                        title_color={Colors.shades.white}
+                        loading={loading}
+                        backgroundColor={Colors.brand.electric}
+                        disabled={!valid||loading}
+                        padding={15}
+                        onPress={() => handleAuthCheck()}
+                    />
+                </View>
+                <View style={{ padding:15, backgroundColor:Colors.shades.shade100 }}>
+                    <Button
+                        title='Are You New?  Sign Up Here'
+                        title_color={Colors.brand.electric}
+                        backgroundColor='transparent'
+                        onPress={() => onRegister()}
+                    />
+                </View>
+            </View>
+            :
+            <View style={{ flex:1 }}>
+                <View style={{ flex:1 }}>
+                <View style={{  borderRadius:8, padding:30 }}>
+                    <View style={{  marginBottom:10 }}>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold'>MY {attribute.toUpperCase()}</Text>
+                    </View>   
+                    <View style={{ flexDirection:'row', alignItems:'center', borderRadius:22, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <View style={{ paddingLeft:10, paddingRight:15 }}>
+                            {getAttributeIcon()}
+                        </View>
+                        <TextInput
+                            value={value}
+                            editable={false}
+                            style={{ flex:1, backgroundColor:Colors.shades.shade100 }}
+                            placeholderTextColor={Colors.brand.slate}
+                            onChangeText={() => console.log('')}
+                        />
+                        <View style={{ padding:10 }}>
+                            <Icons.CheckCirlceIcon color={Colors.utility.success} size={14} />
+                        </View>
+                    </View>
+                    </View>
+                    <View style={{ borderRadius:8, padding:30, backgroundColor:Colors.shades.shade100 }}>
+                        <View style={{  marginBottom:10 }}>
+                            <Text size={18} color={Colors.brand.midnight} weight='bold'>ENTER {type.toUpperCase()}</Text>
+                            {type == 'token' ?
+                            <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>We sent a one-time token to {value}.  Please enter it below.</Text>
+                            :
+                            <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>Please enter the password associated with the {attribute} {value}.</Text>
+                            }
+                        </View>
+                        <View style={{ flexDirection:'row', alignItems:'center', borderRadius:22, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+                            <View style={{ paddingLeft:10, paddingRight:15 }}>
+                                <Icons.LockClosedIcon
+                                    size={20}
+                                    color={Colors.brand.midnight}
+                                />
+                            </View>
+                            <TextInput
+                                style={{ flex:1 }}
+                                value={pass_token}
+                                placeholder={`Enter ${type}`}
+                                autoFocus={true}
+                                secureTextEntry
+                                textContentType={type=='password'?'password':'oneTimeCode'}
+                                placeholderTextColor={Colors.brand.slate}
+                                onChangeText={(text) => {
+                                    setLoginTry({
+                                        ...login_try,
+                                        pass_token: text
+                                    })
+                                }}
+                            />
+                            <View style={{ padding:10 }}>
+                                { login_valid ?
+                                <Icons.CheckCirlceIcon color={Colors.utility.success} size={14} />
+                                :
+                                <Icons.AlertIcon color={Colors.utility.warning} size={14} />
+                                }
+                            </View>
+                        </View>
+                        {login_try.error ?
+                        <TouchableOpacity style={{ marginTop:10, padding:10, backgroundColor:Colors.shades.white, borderRadius:8 }} onPress={() => handleForgot()}>
+                            <Text size={14} color={Colors.utility.error} weight='semibold' textAlign='center'>{login_try.error}</Text>
+                            <Text style={{ marginTop:5 }} size={14} color={Colors.brand.electric} weight='bold' textAlign='center'>SEND ME A CODE INSTEAD</Text>
+                        </TouchableOpacity>
+                        :<></>}
+                    </View>
+                </View>
+                <View style={{ padding:20, flexDirection:'row' }}>
+                    <Button
+                        title='BACK'
+                        style={{ marginRight:5, flex:1 }}
+                        title_color={Colors.brand.electric}
+                        backgroundColor={Colors.shades.white}
+                        borderWidth={1}
+                        borderColor={Colors.brand.electric}
+                        padding={15}
+                        onPress={() => {
+                            setLoginTry({ ...login_try, pass_token: '', visible:false });
+                        }}
+                    />
+                    <Button
+                        title={halted?'Try again in 5 seconds':'LOGIN'}
+                        style={{ flex:3, opacity:!login_valid||loading?0.5:1 }}
+                        title_color={Colors.shades.white}
+                        loading={login_try.loading}
+                        backgroundColor={Colors.brand.electric}
+                        disabled={!login_valid||loading}
+                        padding={15}
+                        onPress={() => handleLogin()}
+                    />
+                </View>
+            </View>
+        }
+        </View>
+    )
+}
+
+export default LoginForm

package/src/{AuthenticateWizard → Authenticator}/Components/StrategyForm.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Checkbox, Icons, Text, TextInput } from "../../Components";
 import Colors from "../../constants/colors";
-import type { AuthExecutionRequestProps, AuthStrategyIdentifierProps, AuthStrategyProps, CompanyProps } from '../api/types';
+import type { AuthExecutionRequestProps, AuthStrategyIdentifierProps, AuthStrategyProps } from '../api/types';
 import { AuthenticateApi, AuthenticateHelpers } from '../api';
-import { Image, Linking, TouchableOpacity, View , FlatList} from 'react-native';
+import { Linking, TouchableOpacity, View , FlatList} from 'react-native';
 
 type StrategyFormProps = {
     visible:boolean,
@@ -14,10 +14,11 @@ type StrategyFormProps = {
     source:string,
     opt_in_url?:string,
     referral_code?:string,
+    onLogin:() => void,
     onAuthenticated: (access_token:string, refresh_token:string, expire_datetime:any) => void
 }
 
-const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source, referral_code, width, opt_in_url, onAuthenticated }:StrategyFormProps) => {
+const StrategyForm = ({ visible, auth_strategy_id, device_id, source, referral_code, width, opt_in_url, onAuthenticated, onLogin }:StrategyFormProps) => {
 
     const [ action_loading, setActionLoading ] = useState(false);
     const [ active_view, setActiveView ] = useState('authenticate');
@@ -26,7 +27,6 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
     const [ verify_error, setVerifyError ] = useState<string|undefined>();
     const [ verify_attempt_allowed, setVeryAttemptAllowed ] = useState(true);
     const [ authenticated, setAuthenticated ] = useState(false);
-    console.log(authenticated)
     const [ auth_execution_request, setAuthExecutionRequest ] = useState<AuthExecutionRequestProps>({
         auth_strategy_id: auth_strategy_id,
         device_id,
@@ -41,17 +41,15 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
     } | undefined>(undefined)
     const [ strategy, setStrategy ] = useState<{
         loading:boolean,
-        company?:CompanyProps,
         auth_strategy?:AuthStrategyProps,
         auth_strategy_identifiers:AuthStrategyIdentifierProps[]
     }>({
         loading: false,
-        company:undefined,
         auth_strategy:undefined,
         auth_strategy_identifiers:[]
     });
 
-    const { company, auth_strategy_identifiers } = strategy;
+    const { auth_strategy, auth_strategy_identifiers } = strategy;
     const verify_strategy_identifier = auth_strategy_identifiers.find(asi => asi.auth_strategy_identifier_id == verify_state?.auth_strategy_identifier_id);
 
     useEffect(() => {
@@ -62,12 +60,7 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
     const setUpWizard = async(auth_strategy_id:string) => {
         setStrategy({ ...strategy, loading:true });
         //Get auth strategy from server
-        const { auth_strategy, auth_strategy_identifiers } = await AuthenticateApi.getAuthStrategyById(auth_strategy_id);
-        let company:CompanyProps|undefined = undefined
-        if(company_id){ 
-            const company_resp = await AuthenticateApi.getCompanyById(company_id)
-            company = company_resp.company 
-        }
+        const { auth_strategy, auth_strategy_identifiers } = await AuthenticateApi.getAuthStrategyById(auth_strategy_id);        
         let unique_attributes = auth_strategy_identifiers.map(asi => {
             //if(!asi.auth_identifier){ return }
             return { attribute: asi.auth_identifier?.attribute ?? '', value: '' }
@@ -84,34 +77,42 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
         setStrategy({
             ...strategy,
             auth_strategy,
-            company,
             auth_strategy_identifiers,
             loading:false
         })
     }
 
+    const getAttributeIcon = (attribute:string) => {
+        switch(attribute){
+            case 'email': return <Icons.EmailIcon size={20} color={Colors.brand.midnight}/>
+            case 'phone': return <Icons.PhoneIcon size={20} color={Colors.brand.midnight} />
+            case 'username': return <Icons.UserIcon size={20} color={Colors.brand.midnight} />
+            default: return <Icons.UserIcon size={20} color={Colors.brand.midnight} />
+        }
+    }
+
     const verifyAuthStrategyIdentifier = async() => {
+        if(authenticated){ return }
         if(!verify_state){ return  }
         if(action_loading){ return } //No mashy mashy
         if(!verify_attempt_allowed){ return } 
         setVeryAttemptAllowed(false);
         setActionLoading(true);
-        const { result, access_token, refresh_token, expire_datetime } = await AuthenticateApi.verifyAuthStrategyIdentifier(verify_state.auth_strategy_identifier_id, verify_state.verification_session_id, token, device_id);
+        const { result, access_token, refresh_token, expire_datetime } = await AuthenticateApi.verifyAuthStrategyIdentifier(verify_state.auth_strategy_identifier_id, verify_state.verification_session_id, token, device_id as string);
         if(result == 'fail' || !access_token || !refresh_token){
             setVerifyError(`Invalid code / password.  Please try again after 10 seconds`)
             setTimeout(() => {
                 setVeryAttemptAllowed(true);
                 setVerifyError(undefined)
+                setActionLoading(false);
             }, 10000);
         } else {
             setAuthenticated(true);
             setTimeout(() => {
                 onAuthenticated(access_token, refresh_token, expire_datetime);
+                setActionLoading(false);
             }, 1500);
         }
-        setActionLoading(false);
-        
-        
     }
 
     const executeAuthStrategy = async() => {
@@ -141,6 +142,9 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
                     <Text size={16} color={Colors.brand.midnight} weight='bold'>{data.item.label}</Text>
                     <Text style={{ marginTop:4 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
                     <View style={{ marginTop:5, flexDirection:'row', alignItems:'center', borderRadius:22, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <View style={{ paddingLeft:10, paddingRight:15 }}>
+                        {getAttributeIcon(data.item.auth_identifier.attribute)}
+                        </View>
                         <TextInput
                             style={{ flex:1 }}
                             value={auth_request.pretty_value ?? auth_request.value}
@@ -182,25 +186,9 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
     }
 
     const strategy_valid = AuthenticateHelpers.isStrategyValid(auth_execution_request)
-    if(!visible){ return <></> }
+    if(!visible || strategy.loading){ return <></> }
     return (
-        <View>
-            {company ?
-            <View style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:22, borderTopLeftRadius:22, borderBottomWidth:1, borderColor:Colors.accents.accent200 }}>
-                <View style={{ flex:1, marginRight:10 }}>
-                    <Text size={28} weight='bold' color={Colors.brand.midnight}>Welcome!</Text>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} weight='semibold' textAlign='left'>Continue to sign up with BettorEdge</Text>
-                </View>
-                <View>
-                    <Image
-                        source={{ uri: company?.company_image?.url }}
-                        style={{ width: width * 0.15, height: width * 0.15, borderRadius:8 }}
-                        resizeMode='cover'
-                    />
-                </View>         
-            </View>
-            :<></>}
-            
+        <View style={{ width:width, flex:1 }}>
             {active_view == 'authenticate' ?
             
             <View nativeID="sign_up" style={{ flex:1 }}>
@@ -221,13 +209,23 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
                         disabled={action_loading || !strategy_valid || !opted_in}
                         title_color={Colors.shades.white}
                         backgroundColor={Colors.brand.electric}
-                        borderRadius={8}
+                        //borderRadius={8}
                         padding={15}
                         onPress={() => {
                             executeAuthStrategy()
                         }}
                     />
                 </View>
+                {auth_strategy?.allow_login ?
+                <View style={{ padding:10, backgroundColor:Colors.shades.shade100 }}>
+                    <Button
+                        title='Already Signed Up? Login Here'
+                        title_color={Colors.brand.electric}
+                        backgroundColor='transparent'
+                        onPress={() => onLogin()}
+                    />
+                </View>
+                :<></>}
                 {active_view == 'authenticate' && opt_in_url ?
                 <View style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
                     <Checkbox 
@@ -251,7 +249,7 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
                     <Text size={18} color={Colors.brand.midnight} weight='semibold' textAlign="center">{verify_strategy_identifier.verify_label??'Enter Verification Code'}</Text>
                     <View style={{ padding:10 }}>
                         <TextInput
-                            style={{ textAlign:'center', fontFamily:'barlow-bold', fontSize:14, padding:12,  borderRadius:8, borderWidth:1, borderColor:Colors.shades.shade600 }}
+                            style={{ textAlign:'center', fontFamily:'barlow-bold', fontSize:14, borderWidth:1, borderColor:Colors.shades.shade600 }}
                             value={token}
                             keyboardType='default'
                             autoFocus
@@ -268,14 +266,30 @@ const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source
                     :<></>}
                 </View>
                 <View nativeID="action_row" style={{ flexDirection:'row', padding:10, paddingLeft:20, paddingRight:20 }}>
+                <Button
+                        title={'BACK'}
+                        loading={action_loading}
+                        style={{ flex:1, marginRight:5 }}
+                        //disabled={!token || action_loading || !verify_attempt_allowed}
+                        title_color={Colors.brand.electric}
+                        borderColor={Colors.brand.electric}
+                        borderWidth={1}
+                        //backgroundColor={Colors.utility.success}
+                        //borderRadius={8}
+                        padding={15}
+                        onPress={() => {
+                            setActiveView('authenticate');
+                            setVerifyState(undefined)
+                        }}
+                    />
                     <Button
-                        title={verify_attempt_allowed? 'Verify': 'Retry in 10 seconds'}
+                        title={verify_attempt_allowed && !action_loading? 'Verify': 'Retry in 10 seconds'}
                         loading={action_loading}
                         style={{ flex:3, opacity:token&&verify_attempt_allowed?1:0.5 }}
                         disabled={!token || action_loading || !verify_attempt_allowed}
                         title_color={Colors.shades.white}
                         backgroundColor={Colors.utility.success}
-                        borderRadius={8}
+                        //borderRadius={8}
                         padding={15}
                         onPress={() => {
                             verifyAuthStrategyIdentifier()