Okta React (TypeScript): Using Custom Login Form Does Not Provide Okta JWT

Questions
1

I’ve created a custom login form instead of using the Okta Sign In Widget. I’ve gotten it work but I’m not receiving an Okta Jwt on successful authentication. When using the Okta Widget, a token is set in local storage. Is it possible to retrieve the Okta Jwt when using a custom login form?

Example Custom login form:

import React, { useState, FormEvent, useEffect } from 'react';
import { FunctionComponent } from 'react';
import { IonContent, IonList, IonInput, IonButton, IonPage, IonItem } from '@ionic/react';
import { withAuth } from '@okta/okta-react';
import OktaAuth from '@okta/okta-auth-js';

interface LoginProps {
    oktaUrl: string;
    auth: any,
}

const LoginComponent: FunctionComponent<LoginProps> = ({ oktaUrl, auth }) => {

    const [authenticated, setAuthenticated] = useState(false);
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const oktaAuth = new OktaAuth({ url: oktaUrl })

    useEffect(() => {
        console.log('okta url -> ', oktaUrl)
        console.log('login component mounted...');
    }, []);

    useEffect(() => {
        console.log('username change -> ', username);
    }, [username])

    /**
     *
     * @param {FormEvent} event
     */
    const login = (event: FormEvent) => {
        event.preventDefault();
        console.log("authenticating user....");

        if (username !== '' && password !== '') {
            oktaAuth.signIn({ username: username, password: password}).then((response: any) => {
                console.log('response -> ', response);
                console.log(oktaAuth);
                console.log(auth);

            }).catch((error: any) => {
                console.log('error -> ', error);
            });
        }
        else {
            console.log('please enter username and password')
        }
    }

    return (
        <IonPage>
            <IonContent fullscreen={ false } >
                <div style={{ padding: '10%' }}>
                    <form onSubmit={ login }>
                        <div style={{ border: 'solid', borderRadius: '1em', padding: '5px' }}>
                            <IonList>
                                <IonItem>
                                    <IonInput id="username" placeholder="username" color="default" type="text" value={ username } onIonChange={(e) => setUsername((e.target as HTMLInputElement).value)} required={ true }/>
                                </IonItem>
                                <IonItem>
                                    <IonInput id="password" placeholder="password" type="password" value={ password } onIonChange={(e) => setPassword((e.target as HTMLInputElement).value)}/>
                                </IonItem>
                            </IonList>
                            <IonButton type="submit" expand="full">Login</IonButton>
                        </div>
                    </form>
                </div>
             </IonContent>
        </IonPage>
    );
}

export default withAuth(LoginComponent);

Essentially I would the same functionality as the Okta Sign-in Widget but with a custom login page/form that does not redirect to the Okta Widget.

2

I tried to passing the auth obj as prop to the login component. that didn’t work. the obj appears to be instantiated but the methods getAccessToken and getIdToken return a promise that does nothing. In the examples for the okta react sdk that uses angular schematics to generate the an auth Home.tsx and App.tsx works but it using the default okta widget. In the Home.tsx that is generate from the schematic is wrapped int he withAuth method and Auth is injected some how via props. When using that auth.getAccessToken() I actually get the token. The difference is that my LoginComponent is a functional component. I don’t know if that would make any difference though. Any help with this would be most appreciated