Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Sign-Widget with single-spa with react doesn't show logo image #3444

Open
byveb opened this issue Oct 26, 2023 · 2 comments
Open

Adding Sign-Widget with single-spa with react doesn't show logo image #3444

byveb opened this issue Oct 26, 2023 · 2 comments
Labels

Comments

@byveb
Copy link

byveb commented Oct 26, 2023

Describe the bug

Hi, Today, i was trying to add Okta Sign-Widget integrate with our Single-spa mfe, but when i import logo and pass the value to logo with Okta config it doesn't show logo.

Reproduction Steps

create single-spa app.
//add Okta sign widget
import logoImage from './path-to-logo.png';

const oktaConfig = {
clientId: 'your-client-id',
redirectUri: window.location.origin + '/login/callback',
logo: logoImage
};

// Login.js
import React, { useEffect } from 'react';
import oktaConfig from './okta-config';

const Login = () => {
useEffect(() => {
const widget = new OktaSignIn(oktaConfig);

widget.renderEl(
  { el: '#okta-sign-in-container' },
  () => {
    // Callback for successful login
  },
  (err) => {
    console.error(err);
  }
);

return () => {
  widget.remove();
};

}, []);

return (


);
};

export default Login;

SDK Versions

okta/react 6.7.x
okta/okta-auth-js 6.7.x

Additional Information

No response

@byveb byveb added the bug label Oct 26, 2023
@jaredperreault-okta
Copy link
Contributor

Docs: https://github.com/okta/okta-signin-widget#logo

Local path or URL to a logo image that is displayed at the top of the Sign-In Widget

import logoImage from './path-to-logo.png';

I believe the issue is this line, you're loading the image into memory via the ES Module Loader. So when you pass logoImage to the Widget config, you're passing the image as a string, rather than a local filepath or url.

@byveb
Copy link
Author

byveb commented Oct 27, 2023

thanks for reply, @jaredperreault-okta .
This is working perfectly with react app (none single-spa). not sure, i believe it's check the imported image object and makes reference ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants