Okta-React : TypeError: Object(...) is not a function

I tried Googling my way to a solution but haven’t found any issues similar to mine. I’m following this article just to get a cool little app running. Everything was working fine until I got to the section about the login button component.

I got this:

Following a roughly 2-year old article might be my first mistake, but I also noticed that importing things from ‘@okta/okta-react’ gives me this in VSCode:

Tried creating a src/okta.d.ts file containing declare module '@okta/okta-react'; but no dice. Has anyone else run into something similar? Thanks!

1 Like

I feel your pain. I discovered and worked off that same article today. At least we have each other :wink:

That’s awesome, Phillip. Strength in numbers :laughing:

It appears that the react tutorial is not up to date with the current version of okta-react. Looking at the docs on github I found this:

Using the recommended methods outlined there, I was able to get things working!

Hope this helps :slight_smile:

Man, what a find. You’re a lifesaver. So you followed the original article as well? How might the LoginButton.js component look different, for example? Should I refactor the component to more closely resemble what might be seen here? :

I wasn’t following that article specifically, but a similar one that was also outdated. I think that refactor would work with the LoginButton component outlined in the article you’re following! Basically replace calls/references to this.props.auth.something with authState and authService depending on the use case.

Perfect. Here’s some of what LoginButton.js looks like after updating with the changes. Posting for those who might also be following the original article:

@gmpierce Big thanks to you once again for helping out!

I think this is still a bug. I am using the hooks useOktaAuth and it just doesn’t work. I am on React 16.13

import React from "react";
import { useOktaAuth } from "@okta/okta-react";

const LoginButton = () => {
  const { authService, authState } = useOktaAuth();

  const login = async () => {
    authService.login("/");
  };
  const logout = async () => {
    authService.logout("/");
  };

  if (authState.isPending) {
    return <div>Loading...</div>;
  }

  if (!authState.isAuthenticated) {
    return (
      <div>
        <button onClick={login}>Login</button>
      </div>
    );
  }

  return (
    <div>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

export default LoginButton;

Howdy, are you getting any errors? Anything that might gives clues as to what’s wrong exactly?

I get the same error - “TypeError: Object(…) is not a function” when using the hooks useOktaAuth() in the above code. As soon as useOktaAuth() is removed, the error is gone. can you reproduce?

Issue resolved by updating okta-react package.

Aha, well that’s good to hear. Out of curiosity, did you install @okta/okta-react@1.2.3 initially?

I was on @2.* before updating to @3 the latest