How do I resolve these TypeScript errors?

Questions
1

I’ve been reading documentation and working on getting started with a React project using Okta for identity management and TypeScript as opposed to regular ES6.

Following along with the docs, I’ve got this segment of code for the widget wrapper:

import React, { useEffect, useRef } from 'react';
import OktaSignIn from '@okta/okta-signin-widget';

interface OWProps {
    config: any;
    onSuccess: any;
    onError: any;
}

const OktaWidget = ({ config, onSuccess, onError }: OWProps) => {
    const widgetRef = useRef();

    useEffect(() => {
        if (!widgetRef.current) return false;
        const widget = new OktaSignIn(config);
        widget.showSignInToGetTokens({ el: widgetRef.current })
            .then(onSuccess).catch(onError);
        return () => widget.remove();
    }, [config, onSuccess, onError])

    return (<div ref={widgetRef} />);
}

The problem is that when using TypeScript, I get the following errors:

Argument of type '() => false | (() => any)' is not assignable to parameter of type 'EffectCallback'. Type 'false | (() => any)' is not assignable to type 'void | Destructor'. Type 'boolean' is not assignable to type 'void | Destructor'.

and

Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'. Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLDivElement>'. Types of property 'current' are incompatible. Type 'undefined' is not assignable to type 'HTMLDivElement | null'.

The first references the function passed as the first parameter to useEffect, the second references the ref attribute on the <div> tag in the return statement.

What am I doing wrong, if anything? Is this more or less due to the lack of official TypeScript support for @okta/okta-signin-widget?

I was forced to use the declare modules workaround to be able to use TS with this library at all, so I’m guessing that probably has something to do with it, but I’m still rather new to some of this, so I don’t really know if that’s the problem or not.

Can someone shed some light on this? I was hoping to get this working today.

I had also really hoped to use TS for this project (I really do prefer it over not doing so), but if I’m not able to due to lack of support, I might just have to switch to Auth0 and go that route and refactor later if I end up wanting to at some point.

Thanks in advance!

2

I see now that if I just want to do this with redirect (as I was doing with Auth0), then I’m actually using the wrong library, and I should just use @okta/okta-react instead.

I guess this is meant for doing your own thing or hosting/rendering it yourself, which I don’t need to do.

3

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.