Tutorials > User Authentication

Ready to get your peeps on board with Next Starter AI? We've got two awesome ways: Magic Links & Google Oauth. Take your pick and let's roll! 🚀

🌟 Great job finishing up one of the awesome tutorials! Now, it's high-five time! 🙌 To continue, smoothly sail over to the signin/signup page, just like this:

/SignInButton.tsx

    "use client";

    import Link from "next/link";
    
    const SigninButton = () => {
        return (
            <Link className="btn btn-primary" href="/signin">
                Login
            </Link>
        );
    };
    
    export default SigninButton;
    

In sign in/up page, the code below handles OTP and Google Login out of the box for you!

/pages/sign-in.tsx

        const handleSignup = async (options: {
            type: string;
            provider?: Provider;
        }) => {
          setIsLoading(true);
      
          try {
            const { type, provider } = options;
            const redirectURL = window.location.origin + "/api/auth/callback";
      
            if (type === "oauth") {
              await supabase.auth.signInWithOAuth({
                provider,
                options: {
                  redirectTo: redirectURL,
                },
              });
            } else if (type === "magic_link") {
              await supabase.auth.signInWithOtp({
                email,
                options: {
                  emailRedirectTo: redirectURL,
                },
              });
      
              toast.success("Check your emails!");
      
              setIsDisabled(true);
            }
          } catch (error) {
            console.log(error);
          } finally {
            setIsLoading(false);
          }
      };
    