Having a problem with getting the providers

Question

how do i get these providers?

so i was following the javascript mastery tutorial and i did the exact same thing , but this useEffect to get the providers isnt working ( i tried alerting it to see it keeps showing null)

here's the piece of code of the providers , tell me what could be wrong

const [providers, setProviders] = useState(null);
 const [toggleDropdown, setToggleDropdown] = useState(false);

 useEffect(() => {
   const setUpProviders = async () => {
     const response = await getProviders();
     setProviders(response);
   };

   setUpProviders();
 }, []);

score 0 · Answer 1 · answered Jul 19 '23 at 18:53

0

This is expected behaviour of useState hook. You can use useEffect to check when your variable updates.

const [providers, setProviders] = useState(null);
const [toggleDropdown, setToggleDropdown] = useState(false);

useEffect(() => {
  const setUpProviders = async () => {
    const response = await getProviders();
    setProviders(response);
  };

  setUpProviders();
}, []);

useEffect(() => {
  console.log(providers)
}, [providers])

For detailed explanation of this behaviour, check this

answered Jul 19 '23 at 18:53

Ravi Yadav

316
1
7

i checked that , the variable isn't updating ... – yacine bendjebbar Jul 19 '23 at 19:00
Then you should check getProviders() function implementation, please share that code also. – Ravi Yadav Jul 19 '23 at 19:36
the getProviders() function is imported from next-auth/react – yacine bendjebbar Jul 19 '23 at 22:32
Yeah but it fetches the providers configured by you, did you configure them correctly? Make sure you have a config file in pages/api/auth folder – Ravi Yadav Jul 20 '23 at 03:31
yes i configured them , just as they did in the tutorial , but still ... – yacine bendjebbar Jul 20 '23 at 16:22

score 0 · Answer 2 · answered Jul 19 '23 at 22:34

here is the full code :

    "use client";

import Link from "next/link";
import Image from "next/image";
import { useState, useEffect } from "react";
import { signIn, signOut, useSession, getProviders } from "next-auth/react";
const Nav = () => {
  const { data: session } = useSession();
  const [providers, setProviders] = useState(null);
  const [toggleDropdown, setToggleDropdown] = useState(false);

  useEffect(() => {
    (async () => {
      const res = await getProviders();
      setProviders(res);
    })();
  }, []);

  useEffect(() => {
    alert(providers);
  }, [providers]);

  return (
    <nav className="flex-between w-full mb-16 pt-3">
      <Link href="/" className="flex gap-2 flex-center">
        <Image
          src="/assets/images/logo.svg"
          alt="Promptopia logo"
          width={30}
          height={30}
          className="object-contain"
        />
        <p className="logo_text">Promptopia</p>
      </Link>
      <div className="sm:flex hidden">
        {session?.user ? (
          <div className="flex gap-3 md:gap-5">
            <Link href="/create-prompt" className="black_btn">
              Create Post
            </Link>

            <button type="button" onClick={signOut} className="outline_btn">
              Sign Out
            </button>

            <Link href="/profile">
              <Image
                src="/assets/images/logo.svg"
                width={37}
                height={37}
                className="rounded-full"
                alt="profile"
              />
            </Link>
          </div>
        ) : (
          <>
            {providers &&
              Object.values(providers).map((provider) => (
                <button
                  type="button"
                  key={provider.name}
                  onClick={() => signIn(provider.id)}
                  className="black_btn"
                >
                  Sign In
                </button>
              ))}
          </>
        )}
      </div>
      <div className="sm:hidden flex relative">
        {session?.user ? (
          <div className="flex">
            <Image
              src="/assets/images/logo.svg"
              width={37}
              height={37}
              className="rounded-full"
              alt="profile"
              onClick={() => setToggleDropdown((prev) => !prev)}
            />

            {toggleDropdown && (
              <div className="dropdown">
                <Link
                  href="/profile"
                  className="dropdown_link"
                  onClick={() => setToggleDropdown(false)}
                >
                  My Profile
                </Link>
                <Link
                  href="/create-prompt"
                  className="dropdown_link"
                  onClick={() => setToggleDropdown(false)}
                >
                  Create Prompt
                </Link>
                <button
                  type="button"
                  onClick={() => {
                    setToggleDropdown(false);
                    signOut();
                  }}
                  className="mt-5 w-full black_btn"
                >
                  Sign Out
                </button>
              </div>
            )}
          </div>
        ) : (
          <>
            {providers &&
              Object.values(providers).map((provider) => (
                <button
                  type="button"
                  key={provider.name}
                  onClick={() => signIn(provider.id)}
                  className="black_btn"
                >
                  Sign In
                </button>
              ))}
          </>
        )}
      </div>
    </nav>
  );
};

export default Nav;

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 21 '23 at 19:53

Having a problem with getting the providers

2 Answers2