@warren , Yes I have added , but tool tip inside the username input box is not coming .(primaryauth.username.tooltip and primaryauth.password.tooltip values not coming as tool tip inside the input box
‘primaryauth.username.tooltip’: ‘ExampleApp ID test32123’,
‘primaryauth.password.tooltip’: ‘Super secret password’,
import React, { useEffect, useRef } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import * as OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
import config from './config';
const Login = () => {
const { oktaAuth } = useOktaAuth();
const widgetRef = useRef();
useEffect(() => {
if (!widgetRef.current) {
return false;
}
const { issuer, clientId, redirectUri, scopes } = config.oidc;
const widget = new OktaSignIn({
/**
* Note: when using the Sign-In Widget for an OIDC flow, it still
* needs to be configured with the base URL for your Okta Org. Here
* we derive it from the given issuer for convenience.
*/
baseUrl: issuer.split('/oauth2')[0],
clientId,
redirectUri,
logo: '/react.svg',
i18n: {
en: {
// Labels
'primaryauth.title': 'ExampleApp Login',
'primaryauth.username.placeholder': 'ExampleApp ID',
'primaryauth.username.tooltip': 'ExampleApp ID test32123',
'primaryauth.password.placeholder': 'Password',
'primaryauth.password.tooltip': 'Super secret password',
// Errors
'error.username.required': 'Please enter an ExampleApp ID',
'error.password.required': 'Please enter a password',
'errors.E0000004': 'Sign in failed!',
},
},
authParams: {
// To avoid redirect do not set "pkce" or "display" here. OKTA-335945
issuer,
scopes,
},
});
widget
.showSignInToGetTokens({
el: widgetRef.current,
scopes,
})
.then((tokens) => {
// Add tokens to storage
oktaAuth.handleLoginRedirect(tokens);
})
.catch((err) => {
throw err;
});
return () => widget.remove();
}, [oktaAuth]);
return (
<div>
<div ref={widgetRef} />
</div>
);
};
export default Login;
Can you try adding language: 'en' to your widget config?
const widget = new OktaSignIn({
/**
* Note: when using the Sign-In Widget for an OIDC flow, it still
* needs to be configured with the base URL for your Okta Org. Here
* we derive it from the given issuer for convenience.
*/
baseUrl: issuer.split('/oauth2')[0],
clientId,
redirectUri,
language: 'en',
logo: '/react.svg',
i18n: {
en: {
'primaryauth.title': 'Sign in to React & Company',
'primaryauth.username.placeholder': 'ExampleApp ID',
'primaryauth.username.tooltip': 'ExampleApp ID test32123',
'primaryauth.password.placeholder': 'Password 123',
'primaryauth.password.tooltip': 'Super secret password',
// Errors
'error.username.required': 'Please enter an ExampleApp ID',
'error.password.required': 'Please enter a password',
'errors.E0000004': 'Sign in failed!',
},
},
authParams: {
// To avoid redirect do not set "pkce" or "display" here. OKTA-335945
issuer,
scopes,
},
});
