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

[Novajed]

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!

[phillip]

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

[Novajed]

That’s awesome, Phillip. Strength in numbers

[gmpierce]

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:

okta/okta-oidc-js

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

Hope this helps

[Novajed]

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? :

[gmpierce]

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.

[Novajed]

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!

[JayJay.Zheng]

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;

[Novajed]

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

[JayJay.Zheng]

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?

[JayJay.Zheng]

Issue resolved by updating okta-react package.

[Novajed]

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

[JayJay.Zheng]

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