Sign-In Page Examples

1
'use client';
2
import { SignIn } from "@stackframe/stack";
3
4
export 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
}

1
'use client';
2
import { useStackApp } from "@stackframe/stack";
3
4
export 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
}

1
'use client';
2
import { useStackApp } from "@stackframe/stack";
3
import { useState } from "react";
4
5
export 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.
17
    // You can customize the redirect URL in the StackServerApp constructor.
18
    const result = await app.signInWithCredential({ email, password });
19
    // It's better to handle each error code separately, but for simplicity,
20
    // we'll just display the error message directly here.
21
    if (result.status === 'error') {
22
      setError(result.error.message);
23
    }
24
  };
25
  
26
  return (
27
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); } }>
28
      {error}
29
      <input type='email' placeholder="email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
30
      <input type='password' placeholder="password" value={password} onChange={(e) => setPassword(e.target.value)} />
31
      <button type='submit'>Sign In</button>
32
    </form>
33
  );
34
}

1
'use client';
2
3
import { useStackApp } from "@stackframe/stack";
4
import { useState } from "react";
5
6
export default function CustomMagicLinkSignIn() {
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
    if (!email) {
14
      setError('Please enter your email address');
15
      return;
16
    }
17
    
18
    // This will send a magic link email to the user's email address.
19
    // When they click the link, they will be redirected to your application.
20
    const result = await app.sendMagicLinkEmail(email);
21
    // It's better to handle each error code separately, but for simplicity,
22
    // we'll just display the error message directly here.
23
    if (result.status === 'error') {
24
      setError(result.error.message);
25
    } else {
26
      setMessage('Magic link sent! Please check your email.');
27
    }
28
  };
29
  
30
  return (
31
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); } }>
32
      {error}
33
      {message ? 
34
        <div>{message}</div> :
35
        <>
36
          <input type='email' placeholder="email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
37
          <button type='submit'>Send Magic Link</button>
38
        </>}
39
    </form>
40
  );
41
}