@SiddalingappaS.81720 (Customer)​ you can write a detailed description of question in https://devforum.okta.com/

Please include the okta config set to SDK and the sample console error (if you are getting some)

Someone from the forum should be able to help you.

We are integrating the Okta Sign-In Widget(https://developer.okta.com/docs/guides/embedded-siw/main/) into our NextJs React application and are experiencing an issue where the Okta Sign-In Widget success callback is not firing with PKCE + redirect flow in our React/Next.js setup.

We have searched the community forums, documentation, and developer support portal but haven't found any helpful answers. It would be really helpful if you could provide some guidance. The widget renders correctly and authentication succeeds — users can log in successfully. However, the renderElsuccess callback never fires, so we never see res or res.tokens in the console. We would also appreciate it if you could share a working example of a Next.js app using the Sign-In Widget with PKCE + redirect flow, since that's our development environment.

Our current widget configuration looks like this:

import React, { useEffect, useRef } from 'react'

import { useOktaAuth } from '@okta/okta-react'

import OktaSignIn from '@okta/okta-signin-widget'

import config from './config'

const OktaLoginWidget = () => {

 const { oktaAuth } = useOktaAuth()

 const widgetRef = useRef<HTMLDivElement>(null)

 // Fetch otp and state from query params from email callback verification URI

 // Application should have http://localhost:8080/login as the email callback verification URI

 const queryParams = new URLSearchParams(window.location.search)

 const otp = queryParams.get('otp')

 const state = queryParams.get('state')

 useEffect(() => {

   if (typeof window === 'undefined' || !widgetRef.current || !oktaAuth) {

     return

   }

   const { clientId, redirectUri, issuer, 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],

     features: {

       // idpDiscovery: false, // Disable IDP discovery to show username/password fields

       rememberMe: true, // Display "Remember me" checkbox

        //registration: true, // Enable "Register" link

       forgotPassword: true, // Display "Forgot password?" link

     },

     // helpLinks: {

     //  custom: [],

     // },

     customButtons: [

       {

         title: 'Register',

         className: 'custom-register-button',

         click: () => {

           window.location.href = '/registration'

         },

       },

     ],

     clientId,

     redirectUri,

      //redirect: 'always',

      //logo: '/path/to/dustin-logo.png', // Add your custom logo here

     i18n: {

       en: {

         'primaryauth.title': 'Sign In',

         'primaryauth.username': 'Email or username',

         'primaryauth.password': 'Password',

         'primaryauth.remember': 'Remember me',

         //'help.forgotPassword': 'Forgot password?',

          //help: 'Forgot password?', // Change "Need help signing in?" text

       },

     },

     authParams: {

       issuer,

       scopes,

       responseType: ['token', 'id_token'], // Adjust based on your needs

     },

     useInteractionCodeFlow: false, // Set to true, if your org is OIE enabled

     state: state ?? undefined,

     useClassicEngine: true

     // otp,

   })

   widget.renderEl(

       { el: '#widget-container' },

       async res => {

         if ('tokens' in res) {

           console.log('Tokens:', res.tokens)

           await oktaAuth.tokenManager.setTokens(res.tokens!)

           window.location.href = redirectUri

         } else {

           console.warn('No tokens found in response')

         }

       },

       err => {

         console.error('Error rendering widget:')

         throw err

       }

   )

   widget.on('afterRender', function (_context: any) {

     const helpLinksContainer = document.getElementById('help-links-container')

     // Ensure helpLinksContainer exists before proceeding

     if (helpLinksContainer) {

       const helpLinks = helpLinksContainer.getElementsByTagName('li')

       // Loop through all the help links and show only the "Forgot password?" link

       if (helpLinks) {

         Array.from(helpLinks).forEach(link => {

           if (link.textContent && link.textContent.includes('Forgot password?')) {

              link.style.display = 'block' // Make "Forgot password?" visible

           } else {

              link.style.display = 'none' // Hide all other help links

           }

         })

       }

       // Ensure the help section is visible

        helpLinksContainer.style.display = 'block'

     } else {

       console.warn('helpLinksContainer not found')

     }

     const signInButton = document.querySelector('input[type="submit"]') as HTMLInputElement

     if (signInButton) {

       signInButton.addEventListener('click', () => {

       })

     }

     const registerButton = document.querySelector('.custom-register-button') as HTMLAnchorElement

     if (registerButton) {

       registerButton.setAttribute('href', '/registration')

     }

   })

   return () => widget.remove()

 }, [oktaAuth, otp, state])

 return (

   <div className="u-w-100 u-px-24">

     <div id="widget-container" ref={widgetRef} />

   </div>

 )

}

export default OktaLoginWidget

Looking at the code snippet,

renderEl(..., success => {...})

callback won’t run. That callback only fires in non-redirect (“embedded/tokens-in-page”) mode and wont work in redirect mode.

I noticed also you’re using

responseType: ['token','id_token']

(implicit flow), which is not PKCE. In OIE orgs you should use useInteractionCodeFlow: true

and responseType: 'code'

and handle tokens after the redirect.