Sign In

Custom page with SignIn component

1'use client';
2import { SignIn } from "@stackframe/stack";
3
4export default function DefaultSignIn() {
5  // optionally redirect to some other page if the user is already signed in
6  // const user = useUser();
7  // if (user) { redirect to some other page }
8  return <SignIn fullPage />;
9}

You can also use useUser at the beginning of the sign in page to check if wether the user is already signed in and redirect them to some other page if they are.

Other useful components

CredentialSignIn: A component that contains a form for signing in with email and password.

OAuthGroup: A list of available OAuth provider signin buttons components. The available provider list is fetched from the server.

OAuthButton: A single OAuth sign in button.

Custom OAuth Sign In

1'use client';
2import { useStackApp } from "@stackframe/stack";
3
4export default function CustomOAuthSignIn() {
5  const app = useStackApp();
6
7  return (
8    <div>
9      <h1>My Custom Sign In page</h1>
10      <button onClick={async () => {
11        // this will redirect to the OAuth provider's login page
12        await app.signInWithOAuth('google');
13      }}>
14        Sign In with Google
15      </button>
16    </div>
17  );
18}

Custom Credential Sign In

1'use client';
2import { useStackApp } from "@stackframe/stack";
3import { useState } from "react";
4
5export default function CustomCredentialSignIn() {
6  const [email, setEmail] = useState('');
7  const [password, setPassword] = useState('');
8  const [error, setError] = useState('');
9  const app = useStackApp();
10
11  const onSubmit = async () => {
12    if (!password) {
13      setError('Please enter your password');
14      return;
15    }
16    // this will redirect to app.urls.afterSignIn if successful, you can customize it in the StackServerApp constructor
17    const result = await app.signInWithCredential({ email, password });
18    // It is better to handle each error code separately, but we will just show the error code directly for simplicity here
19    if (result.status === 'error') {
20      setError(result.error.message);
21    }
22  };
23  
24  return (
25    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); } }>
26      {error}
27      <input type='email' placeholder="email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
28      <input type='password' placeholder="password" value={password} onChange={(e) => setPassword(e.target.value)} />
29      <button type='submit'>Sign In</button>
30    </form>
31  );
32}
1'use client';
2
3import { useStackApp } from "@stackframe/stack";
4import { useState } from "react";
5
6export default function CustomCredentialSignIn() {
7  const [email, setEmail] = useState('');
8  const [error, setError] = useState('');
9  const [message, setMessage] = useState('');
10  const app = useStackApp();
11
12  const onSubmit = async () => {
13    // this will redirect to app.urls.afterSignIn if successful, you can customize it in the StackServerApp constructor
14    const result = await app.sendMagicLinkEmail(email);
15    // It is better to handle each error code separately, but we will just show the error code directly for simplicity here
16    if (result.status === 'error') {
17      setError(result.error.message);
18    } else {
19      setMessage('Magic link sent! Please check your email.');
20    }
21  };
22  
23  return (
24    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); } }>
25      {error}
26      {message ? 
27        <div>{message}</div> :
28        <>
29          <input type='email' placeholder="email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
30          <button type='submit'>Send Magic Link</button>
31        </>}
32    </form>
33  );
34}