Question 212828 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Configure next-auth getProviders error with Typescript

I’m new to Typescript and I wactch a tutorial that use next-auth, but since I following the tutorial with Typescript, I encounter this error when using getProviders function.

enter image description here

enter image description here

As you can see when I try to update the state it show an error. What is the cause and how can I solve this? Thank you

Tags:

2

Answers


  1. 0

    The state you defined infers that it’ll be only null. You need to add type to that state such as useState<T>. Instead of T, you can copy and paste the typeof response

    Login or Signup to reply.
  2. 0

    this is your useState

     const [providers,setProvider]=useState(null)

    if you hover over providers, its type is referred as

     const providers: null

    But then you are setting providers with getProviders. this is type for getProviders

    function getProviders(): Promise<Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider> | null>

    you should set the state like this:

     import { signIn, getProviders ,LiteralUnion,ClientSafeProvider} from "next-auth/react";
 import { BuiltInProviderType } from "next-auth/providers";


const [providers, setProvider] = React.useState<Record<
           LiteralUnion<BuiltInProviderType, string>,ClientSafeProvider > | null>(null);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search