Okta-React /implicit/callback won't get login token

I am using Okta-React for authentication in my React project and when I run the React test server my login authenticates successfully and redirects to the account page. When I run the React build command and render the build files with Django, my login authenticates properly, but when it redirects back to my site I get a blank /implicit/callback page, no login token or user info, and the code & state gets stuck in the URL. Does anyone know why this is only happening when using Django, and what I can do to resolve this issue?

Here is my authConfig:

const config = {
  issuer: 'https://dev-#######.okta.com/oauth2/default',
  redirectUri: window.location.origin + '/implicit/callback',
  clientId: '#@#@#@#@#@#@#@#@#',
  pkce: true
};

export default config;

Here is my accountAuth

import React, { useState, useEffect } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import '../scss/sass.scss';
import "../../node_modules/bootstrap/scss/bootstrap.scss";
import 'react-bootstrap';

const AccountAuth = () => {
  const { authState, authService } = useOktaAuth();
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    if (!authState.isAuthenticated) {
      // When user isn't authenticated, forget any user info
      setUserInfo(null);
    } else {
      authService.getUser().then((info) => {
        setUserInfo(info);
      });
    }
  }, [authState, authService]); // Update if authState changes

  localStorage.setItem("username", userInfo && userInfo.given_name)

  const login = async () => {
    // Redirect to '/account_page' after login
    localStorage.setItem("accountLink", "/account_page")
    localStorage.setItem("loginPostingVisibilityStyle", { display: "none" })
    localStorage.setItem("postingVisibleStyle", { display: 'block' })
    authService.login('/auth_index');
  }

  const logout = async () => {
    // Redirect to '/' after logout
    localStorage.setItem("username", null)
    localStorage.setItem("accountLink", "/auth_index")
    localStorage.setItem("loginPostingVisibilityStyle", { display: "block" })
    localStorage.setItem("postingVisibleStyle", { display: 'none' })
    authService.logout('/');
  }

  return authState.isAuthenticated ?
    <button className="settings-index" onClick={logout}>Logout</button> :
    <button className="settings-index" onClick={login}>Login</button>;


};

export default AccountAuth;

Here is an example of the URL when it’s stuck

http://localhost:8000/implicit/callback?code=-mRoU2jTR5HAFJeNVo_PVZsIj8qXuB1-aioFUiZBlWo&state=c9RXCvEgQ4okNgp7C7wPkI62ifzTakC0Ezwd8ffTEb29g5fNALj7aQ63fjFNGGhT

Hi @Ashton! Is this a Single Page App + Django or a Web App?

@sigama This is a Single Page App + Django

@Ashton Can you please open a support ticket through an email to support@okta.com with this issue? One of our Developer Support Engineers will take the case and assist you in narrowing down the cause of the issue. Thanks

I’ve found that the problem is that Django is trying to render the Okta-React bundle from the wrong directory. The solution is to redirect the incorrect URL to the right staticfile directory. Thank you for wanting to help!

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