SignIn Modal

A popup windows to make your user log in from everywhere.

• Component: <SignInModal/>

• Path: /components/layout/sign-in-modal.tsx

• Import:

import { useSignInModal } from "@/components/layout/sign-in-modal";

Footer

Call this modal by using its custom hook:

const { SignInModal, setShowSignInModal } = useSignInModal();
...
<section>
  <SignInModal />
  <Button onClick={() => setShowSignInModal(true)}>
    Login
  </Buttons/
</section>

The modal currently comes with 2 built-in login options:

• Google Auth

• Magic Links

You can easily one new ones from NextAuth's providers by updating this Button section of the component:

sign-in-modal.tsx

          <Button
            disabled={signInClicked}
            variant="secondary"
            className={signInClicked ? "w-full cursor-not-allowed" : "w-full"}
            onClick={() => {
              setSignInClicked(true);
              signIn("google");
            }}
          >
            {signInClicked ? (
              <LoadingDots color="#808080" />
            ) : (
              <>
                <Google className="mr-2 h-5 w-5" />
                <p>Sign In with Google</p>
              </>
            )}
          </Button>