When running my Next.js app, the oktaAuth instance is undefined in the HomePage component, preventing proper authentication with Okta

Questions OAuth/OIDC
1 
/my-nextjs-app

├── /contexts│   
    └── UserContext.tsx
├── /pages│   
  ├── _app.tsx│
  └── index.tsx
├── /container
│   └── HomeContainer.tsx
├── /utils
│   └── oktaConfig.ts
├── /styles
│   └── globals.css
└── package.json

HomePage Component (/pages/index.tsx):

// /pages/home.tsx
import React, { useEffect } from "react";
import { useOktaAuth } from "@okta/okta-react";
import HomeContainer from "@/container/HomeContainer";

const HomePage: React.FC = () => {
  const { authState, oktaAuth } = useOktaAuth();

  useEffect(() => {
    const checkAuth = async () => {
      if (authState && !authState.isAuthenticated) {
        await oktaAuth.signInWithRedirect();
      }
    };
    
    if (authState !== null) {
      checkAuth();
    }
  }, [authState, oktaAuth]);

  if (authState === null) {
    return <div>Loading authentication state...!!</div>;
  }

  if (!authState.isAuthenticated) {
    return <div>Redirecting to login...</div>;
  }

  return (
    <div>
     <HomeContainer/>
    </div>
  );
};

export default HomePage;

MyApp Component (/pages/_app.tsx):

// /pages/_app.tsx
import { AppProps } from "next/app";
import { OktaAuth } from "@okta/okta-auth-js";
import { Security, useOktaAuth } from "@okta/okta-react";
import { useRouter } from "next/router";
import { oktaConfig } from "../utils/oktaConfig";
import "../styles/globals.css";

// Initialize Okta Auth
const oktaAuth = new OktaAuth(oktaConfig);

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  // Restore the original URI after login
  const restoreOriginalUri = async (_oktaAuth: OktaAuth, originalUri: string) => {
    router.replace(originalUri || "/");
  };

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <Component {...pageProps} />
    </Security>
  );
}

export default MyApp;

`Problem Description: When I run the application, the oktaAuth instance appears to be undefined in the HomePage component. I am trying to check if the user is authenticated and redirect to the Okta login page if not, but I’m not sure if I’m implementing the Security wrapper correctly or if I’m missing something in the setup.

"@okta/okta-auth-js": "^7.8.1",
"@okta/okta-react": "^6.9.0",
"next": "^14.1.2",
"next-auth": "^4.24.5",

How can I properly pass the oktaAuth instance to the HomePage component? Are there any best practices I should follow when integrating Okta with Next.js? Is there anything else I might be missing in my setup?

2

Hi,

We do not support Next.js as of now. We recommend you to create an Okta Idea for this:

If you want this we encourage you to create an Okta idea:
You can suggest a feature enhancement on the Okta Community page by going to the Community→ Ideas tab. Features suggested in our community are reviewed and can be voted and commented on by other members. High popularity will increase the likelihood of it being picked up by the Product Team and it being implemented.

More details here:

https://support.okta.com/help/s/blog/a674z000001cj7YAAQ/okta-ideas-faq?language=en_US

3

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