# A very strange bug with okta sign in widget

**URL:** <https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935>\
**Category:** Questions\
**Created:** [November 27, 2023, 7:53pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935 "2023-11-27T19:53:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![greenblob](https://avatars.discourse-cdn.com/v4/letter/g/5daacb/32.png) [@greenblob](https://devforum.okta.com/u/greenblob)\
**Post date:** [November 27, 2023, 7:53pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/1 "2023-11-27T19:53:59Z")

</div>

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](https://global.discourse-cdn.com/oktadev/original/2X/9/95645a885169c11ba1d007acdfcbdf7269fe0b82.png)

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [November 27, 2023, 8:03pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/2 "2023-11-27T20:03:31Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![greenblob](https://avatars.discourse-cdn.com/v4/letter/g/5daacb/32.png) [@greenblob](https://devforum.okta.com/u/greenblob)\
**Post date:** [November 27, 2023, 8:09pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/3 "2023-11-27T20:09:00Z")

</div>

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

```auto

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;

```

```auto
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;

```

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

```

```auto

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;

```

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [November 27, 2023, 10:05pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/4 "2023-11-27T22:05:58Z")

</div>

How are you importing the CSS for your login route?

---

<div class="post-metadata">

**Author:** ![greenblob](https://avatars.discourse-cdn.com/v4/letter/g/5daacb/32.png) [@greenblob](https://devforum.okta.com/u/greenblob)\
**Post date:** [November 27, 2023, 10:26pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/5 "2023-11-27T22:26:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [November 27, 2023, 10:30pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/6 "2023-11-27T22:30:28Z")

</div>

Here’s an example of the type of import I’m talking about: [Embedded Okta Sign-In Widget fundamentals | Okta Developer](https://developer.okta.com/docs/guides/embedded-siw/main/#bundling-the-widget)

> Bundling the Widget  
> If you’re bundling your assets, import them from `@okta/okta-signin-widget`. For example, using [webpack](https://webpack.js.org/):

```auto
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](https://github.com/webpack-contrib/css-loader#usage).

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [November 27, 2023, 10:32pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/7 "2023-11-27T22:32:32Z")

</div>

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

- [https://github.com/okta/samples-js-react/tree/master/custom-login](https://github.com/okta/samples-js-react/tree/master/custom-login)
- [https://github.com/okta/okta-react/tree/master/samples](https://github.com/okta/okta-react/tree/master/samples)

---

<div class="post-metadata">

**Author:** ![greenblob](https://avatars.discourse-cdn.com/v4/letter/g/5daacb/32.png) [@greenblob](https://devforum.okta.com/u/greenblob)\
**Post date:** [November 27, 2023, 10:49pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/8 "2023-11-27T22:49:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [November 27, 2023, 10:55pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/9 "2023-11-27T22:55:23Z")

</div>

No problem, @greenblob!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [November 28, 2023, 10:56pm UTC](https://devforum.okta.com/t/a-very-strange-bug-with-okta-sign-in-widget/25935/10 "2023-11-28T22:56:02Z")

</div>

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