A very strange bug with okta sign in widget

Questions
1

Hello, my okta sign in widget is looking very strange, like it’s css is not loading or something. I followed the docs 1:1, does anyone know what may be causing this?

image
image1218×278 6.68 KB

2

Does look a bit like the CSS is missing. Can you share your code (including how you load the widget js and css)? Are you loading the widget from our CDN or are you using the npm module instead?

3

Of course, this is all of the code i’m using. And as far as i know i only installed the modules through npm install, and didn’t do anything with CDN


const LoginWidget = ({config}) => {
    const {oktaAuth, authState} = useOktaAuth();
    const onSuccess = (tokens) => {
        oktaAuth.handleLoginRedirect(tokens);
    };
    
    const onError = (err) => {
        console.log("Sign in error", err);
    };
    
    if(!authState) {
        return (<DiceAmount/>);
    }
    
    return authState.isAuthenticated ? 
        <Redirect to={{pathname: "/"}}/>
    :
     <OktaSignInWidget config={config} onSuccess={onSuccess} onError={onError}/> ;
};
export default LoginWidget;

const OktaSignInWidget = ({onSuccess, onError}) => {
    const widgetRef = useRef();

    useEffect(() => {
        if (!widgetRef.current) {
            return false;
        }
        const widget = new OktaSignIn(oktaConfig);

        widget.showSignInToGetTokens({
            el: widgetRef.current,
        }).then(onSuccess).catch(onError);


        return () => widget.remove();
    }, [onSuccess, onError]);

    return (

        <div className='container mt-5 mb-5'> <div ref={widgetRef}></div> </div>
    );
};

export default OktaSignInWidget;

export const oktaConfig = {
    clientId: "private:]",
    issuer: "private:]",
    redirectUri: "http://localhost:3000/login/callback",
    scopes: ["openid", "profile", "email"],
    pkce: true,
    disableHttpsChecks: true,
};


const oktaAuth = new OktaAuth(oktaConfig);
export const App = () => {

    const history = useHistory();
    const restoreOriginalUri = async (_oktaAuth: any, originalUri: any) => {
        history.replace(toRelativeUrl(originalUri || "/", window.location.origin));
    };
    const customAuthHandler = () => {
        history.push("/login");
    };

    return (

        <DefenceRerollDiceAmountContextProvider>
            <DefenceSideTogglesContextProvider>
                <AttackRerollDiceAmountContextProvider>
                    <AttackSideTogglesContextProvider>
                        <AttackDiceAmountContextProvider>
                            <WarbandFiltersTogglesContextProvider>
                                <DefenceDiceAmountContextProvider>
                                    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri} onAuthRequired={customAuthHandler}>

                                        <Route path='/login'
                                               render={() => <LoginWidget config={oktaConfig} />}/>
                                        <Route path='/login/callback'
                                               component={LoginCallback}/>
                                        <div className="background">
                                            <Navbar />
                                            <WarbandsBrowserPage />
                                            <Footer />
                                        </div>
                                    </Security>
                                </DefenceDiceAmountContextProvider>
                            </WarbandFiltersTogglesContextProvider>
                        </AttackDiceAmountContextProvider>
                    </AttackSideTogglesContextProvider>
                </AttackRerollDiceAmountContextProvider>
            </DefenceSideTogglesContextProvider>
        </DefenceRerollDiceAmountContextProvider>
    );
};

export default App;
4

How are you importing the CSS for your login route?

5

I am not importing any additional css, everything i did up to this point was 1:1 from docs

6

Here’s an example of the type of import I’m talking about: Embedded Okta Sign-In Widget fundamentals | Okta Developer

Bundling the Widget
If you’re bundling your assets, import them from @okta/okta-signin-widget. For example, using webpack:

import OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

Loading CSS requires the css-loader plugin. You can find more information about it at the css-loader gitHub repository.

1 Like
7

PS, as you seem to be working on a React app, you may want to check out some React samples we have:

8

i was indeed missing a css import that i didn’t know about, thanks a lot and have a great day!

1 Like
9

No problem, @greenblob!

1 Like
10

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