Email & Password

Learn how to set up authentication using a password.

Overview

One of the most common authentication methods used today is the humble email and password. With this setup, users that come to your website will need to supply these credentials in order to gain access to their account.

Clerk enforces every user to have a verified email address. This is done during sign up, by sending a one-time code to the supplied email address.

There are a few different ways to set up an email/password user management system in Clerk. You can use Clerk Components or build a completely custom flow with ClerkJS or Clerk React. The rest of this guide will explain how to set up an email/password user management system using any of the above methods.

To keep your users safe, Clerk follows a "secure-by-default" policy, and we follow all NIST best practices. This includes password validations out of the box.

Before you start

You need to create a Clerk Application in your Clerk Dashboard. For more information, check out our Set up your application guide.
You need to install Clerk React or ClerkJS to your application.

Configuration

The first thing you need to do is enable email address and password-based authentication on the Email, Phone, Username page.

Select Email address for your contact information and Password as your authentication factor.

The email/password sign-up flow requires users to provide their email address and their password and returns a newly-created user with an active session.

A successful sign-up consists of the following steps:

1. Initiate the sign-up process, by collecting the user's email address and password.
2. Prepare the email address verification, which sends a one-time code to the given address.
3. Attempt to complete the email address verification by supplying the one-time code.
4. If the email address verification is successful, complete the sign-up process by creating the user account and setting their session as active.

1
"use client"
2
import { useState } from "react";
3
import { useSignUp } from "@clerk/nextjs";
4
import { useRouter } from "next/router";
5

6
export default function SignUpForm() {
7
  const { isLoaded, signUp, setActive } = useSignUp();
8
  const [emailAddress, setEmailAddress] = useState("");
9
  const [password, setPassword] = useState("");
10
  const [pendingVerification, setPendingVerification] = useState(false);
11
  const [code, setCode] = useState("");
12
  const router = useRouter();
13
  // start the sign up process.
14
  const handleSubmit = async (e) => {
15
    e.preventDefault();
16
    if (!isLoaded) {
17
      return;
18
    }
19

20
    try {
21
      await signUp.create({
22
        emailAddress,
23
        password,
24
      });
25

26
      // send the email.
27
      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
28

29
      // change the UI to our pending section.
30
      setPendingVerification(true);
31
    } catch (err: any) {
32
      console.error(JSON.stringify(err, null, 2));
33
    }
34
  };
35

36
  // This verifies the user using email code that is delivered.
37
  const onPressVerify = async (e) => {
38
    e.preventDefault();
39
    if (!isLoaded) {
40
      return;
41
    }
42

43
    try {
44
      const completeSignUp = await signUp.attemptEmailAddressVerification({
45
        code,
46
      });
47
      if (completeSignUp.status !== "complete") {
48
        /*  investigate the response, to see if there was an error
49
         or if the user needs to complete more steps.*/
50
        console.log(JSON.stringify(completeSignUp, null, 2));
51
      }
52
      if (completeSignUp.status === "complete") {
53
        await setActive({ session: completeSignUp.createdSessionId })
54
        router.push("/");
55
      }
56
    } catch (err: any) {
57
      console.error(JSON.stringify(err, null, 2));
58
    }
59
  };
60

61
  return (
62
    <div>
63
      {!pendingVerification && (
64
        <form>
65
          <div>
66
            <label htmlFor="email">Email</label>
67
            <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
68
          </div>
69
          <div>
70
            <label htmlFor="password">Password</label>
71
            <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
72
          </div>
73
          <button onClick={handleSubmit}>Sign up</button>
74
        </form>
75
      )}
76
      {pendingVerification && (
77
        <div>
78
          <form>
79
            <input
80
              value={code}
81
              placeholder="Code..."
82
              onChange={(e) => setCode(e.target.value)}
83
            />
84
            <button onClick={onPressVerify}>
85
              Verify Email
86
            </button>
87
          </form>
88
        </div>
89
      )}
90
    </div>
91
  );
92
}

1
import { useState } from "react";
2
import { useSignUp } from "@clerk/nextjs";
3
import { useRouter } from "next/router";
4

5
export default function SignUpForm() {
6
  const { isLoaded, signUp, setActive } = useSignUp();
7
  const [emailAddress, setEmailAddress] = useState("");
8
  const [password, setPassword] = useState("");
9
  const [pendingVerification, setPendingVerification] = useState(false);
10
  const [code, setCode] = useState("");
11
  const router = useRouter();
12
  // start the sign up process.
13
  const handleSubmit = async (e) => {
14
    e.preventDefault();
15
    if (!isLoaded) {
16
      return;
17
    }
18

19
    try {
20
      await signUp.create({
21
        emailAddress,
22
        password,
23
      });
24

25
      // send the email.
26
      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
27

28
      // change the UI to our pending section.
29
      setPendingVerification(true);
30
    } catch (err: any) {
31
      console.error(JSON.stringify(err, null, 2));
32
    }
33
  };
34

35
  // This verifies the user using email code that is delivered.
36
  const onPressVerify = async (e) => {
37
    e.preventDefault();
38
    if (!isLoaded) {
39
      return;
40
    }
41

42
    try {
43
      const completeSignUp = await signUp.attemptEmailAddressVerification({
44
        code,
45
      });
46
      if (completeSignUp.status !== "complete") {
47
        /*  investigate the response, to see if there was an error
48
         or if the user needs to complete more steps.*/
49
        console.log(JSON.stringify(completeSignUp, null, 2));
50
      }
51
      if (completeSignUp.status === "complete") {
52
        await setActive({ session: completeSignUp.createdSessionId })
53
        router.push("/");
54
      }
55
    } catch (err: any) {
56
      console.error(JSON.stringify(err, null, 2));
57
    }
58
  };
59

60
  return (
61
    <div>
62
      {!pendingVerification && (
63
        <form>
64
          <div>
65
            <label htmlFor="email">Email</label>
66
            <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
67
          </div>
68
          <div>
69
            <label htmlFor="password">Password</label>
70
            <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
71
          </div>
72
          <button onClick={handleSubmit}>Sign up</button>
73
        </form>
74
      )}
75
      {pendingVerification && (
76
        <div>
77
          <form>
78
            <input
79
              value={code}
80
              placeholder="Code..."
81
              onChange={(e) => setCode(e.target.value)}
82
            />
83
            <button onClick={onPressVerify}>
84
              Verify Email
85
            </button>
86
          </form>
87
        </div>
88
      )}
89
    </div>
90
  );
91
}

1
import { useState } from "react";
2
import { useSignUp } from "@clerk/clerk-react";
3

4
export default function SignUpForm() {
5
  const { isLoaded, signUp, setActive } = useSignUp();
6
  const [emailAddress, setEmailAddress] = useState("");
7
  const [password, setPassword] = useState("");
8
  const [pendingVerification, setPendingVerification] = useState(false);
9
  const [code, setCode] = useState("");
10
  // start the sign up process.
11
  const handleSubmit = async (e) => {
12
    e.preventDefault();
13
    if (!isLoaded) {
14
      return;
15
    }
16

17
    try {
18
      await signUp.create({
19
        emailAddress,
20
        password,
21
      });
22

23
      // send the email.
24
      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
25

26
      // change the UI to our pending section.
27
      setPendingVerification(true);
28
    } catch (err: any) {
29
      console.error(JSON.stringify(err, null, 2));
30
    }
31
  };
32

33
  // This verifies the user using email code that is delivered.
34
  const onPressVerify = async (e) => {
35
    e.preventDefault();
36
    if (!isLoaded) {
37
      return;
38
    }
39

40
    try {
41
      const completeSignUp = await signUp.attemptEmailAddressVerification({
42
        code,
43
      });
44
      if (completeSignUp.status !== "complete") {
45
        /*  investigate the response, to see if there was an error
46
         or if the user needs to complete more steps.*/
47
        console.log(JSON.stringify(completeSignUp, null, 2));
48
      }
49
      if (completeSignUp.status === "complete") {
50
        await setActive({ session: completeSignUp.createdSessionId })
51
      }
52
    } catch (err: any) {
53
      console.error(JSON.stringify(err, null, 2));
54
    }
55
  };
56

57
  return (
58
    <div>
59
      {!pendingVerification && (
60
        <form>
61
          <div>
62
            <label htmlFor="email">Email</label>
63
            <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
64
          </div>
65
          <div>
66
            <label htmlFor="password">Password</label>
67
            <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
68
          </div>
69
          <button onClick={handleSubmit}>Sign up</button>
70
        </form>
71
      )}
72
      {pendingVerification && (
73
        <div>
74
          <form>
75
            <input
76
              value={code}
77
              placeholder="Code..."
78
              onChange={(e) => setCode(e.target.value)}
79
            />
80
            <button onClick={onPressVerify}>
81
              Verify Email
82
            </button>
83
          </form>
84
        </div>
85
      )}
86
    </div>
87
  );
88
}

1
import { useState } from "react";
2
import { useSignUp } from "@clerk/remix";
3

4
export default function SignUpForm() {
5
  const { isLoaded, signUp, setActive } = useSignUp();
6
  const [emailAddress, setEmailAddress] = useState("");
7
  const [password, setPassword] = useState("");
8
  const [pendingVerification, setPendingVerification] = useState(false);
9
  const [code, setCode] = useState("");
10
  // start the sign up process.
11
  const handleSubmit = async (e) => {
12
    e.preventDefault();
13
    if (!isLoaded) {
14
      return;
15
    }
16

17
    try {
18
      await signUp.create({
19
        emailAddress,
20
        password,
21
      });
22

23
      // send the email.
24
      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
25

26
      // change the UI to our pending section.
27
      setPendingVerification(true);
28
    } catch (err: any) {
29
      console.error(JSON.stringify(err, null, 2));
30
    }
31
  };
32

33
  // This verifies the user using email code that is delivered.
34
  const onPressVerify = async (e) => {
35
    e.preventDefault();
36
    if (!isLoaded) {
37
      return;
38
    }
39

40
    try {
41
      const completeSignUp = await signUp.attemptEmailAddressVerification({
42
        code,
43
      });
44
      if (completeSignUp.status !== "complete") {
45
        /*  investigate the response, to see if there was an error
46
         or if the user needs to complete more steps.*/
47
        console.log(JSON.stringify(completeSignUp, null, 2));
48
      }
49
      if (completeSignUp.status === "complete") {
50
        await setActive({ session: completeSignUp.createdSessionId })
51
        // Handle your own logic here, like redirecting to a new page if needed.
52
      }
53
    } catch (err: any) {
54
      console.error(JSON.stringify(err, null, 2));
55
    }
56
  };
57

58
  return (
59
    <div>
60
      {!pendingVerification && (
61
        <form>
62
          <div>
63
            <label htmlFor="email">Email</label>
64
            <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
65
          </div>
66
          <div>
67
            <label htmlFor="password">Password</label>
68
            <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
69
          </div>
70
          <button onClick={handleSubmit}>Sign up</button>
71
        </form>
72
      )}
73
      {pendingVerification && (
74
        <div>
75
          <form>
76
            <input
77
              value={code}
78
              placeholder="Code..."
79
              onChange={(e) => setCode(e.target.value)}
80
            />
81
            <button onClick={onPressVerify}>
82
              Verify Email
83
            </button>
84
          </form>
85
        </div>
86
      )}
87
    </div>
88
  );
89
}

1
import { useState } from "react";
2
// Use the react package when using Gatsby
3
import { useSignUp } from "@clerk/react";
4
import { useRouter } from "next/router";
5

6
export default function SignUpForm() {
7
  const { isLoaded, signUp, setActive } = useSignUp();
8
  const [emailAddress, setEmailAddress] = useState("");
9
  const [password, setPassword] = useState("");
10
  const [pendingVerification, setPendingVerification] = useState(false);
11
  const [code, setCode] = useState("");
12
  const router = useRouter();
13
  // start the sign up process.
14
  const handleSubmit = async (e) => {
15
    e.preventDefault();
16
    if (!isLoaded) {
17
      return;
18
    }
19

20
    try {
21
      await signUp.create({
22
        emailAddress,
23
        password,
24
      });
25

26
      // send the email.
27
      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
28

29
      // change the UI to our pending section.
30
      setPendingVerification(true);
31
    } catch (err: any) {
32
      console.error(JSON.stringify(err, null, 2));
33
    }
34
  };
35

36
  // This verifies the user using email code that is delivered.
37
  const onPressVerify = async (e) => {
38
    e.preventDefault();
39
    if (!isLoaded) {
40
      return;
41
    }
42

43
    try {
44
      const completeSignUp = await signUp.attemptEmailAddressVerification({
45
        code,
46
      });
47
      if (completeSignUp.status !== "complete") {
48
        /*  investigate the response, to see if there was an error
49
         or if the user needs to complete more steps.*/
50
        console.log(JSON.stringify(completeSignUp, null, 2));
51
      }
52
      if (completeSignUp.status === "complete") {
53
        await setActive({ session: completeSignUp.createdSessionId })
54
        router.push("/");
55
      }
56
    } catch (err: any) {
57
      console.error(JSON.stringify(err, null, 2));
58
    }
59
  };
60

61
  return (
62
    <div>
63
      {!pendingVerification && (
64
        <form>
65
          <div>
66
            <label htmlFor="email">Email</label>
67
            <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
68
          </div>
69
          <div>
70
            <label htmlFor="password">Password</label>
71
            <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
72
          </div>
73
          <button onClick={handleSubmit}>Sign up</button>
74
        </form>
75
      )}
76
      {pendingVerification && (
77
        <div>
78
          <form>
79
            <input
80
              value={code}
81
              placeholder="Code..."
82
              onChange={(e) => setCode(e.target.value)}
83
            />
84
            <button onClick={onPressVerify}>
85
              Verify Email
86
            </button>
87
          </form>
88
        </div>
89
      )}
90
    </div>
91
  );
92
}

1
import * as React from "react";
2
import { Text, TextInput, TouchableOpacity, View } from "react-native";
3
import { useSignUp } from "@clerk/clerk-expo";
4

5
export default function SignUpScreen() {
6
  const { isLoaded, signUp, setActive } = useSignUp();
7

8
  const [emailAddress, setEmailAddress] = React.useState("");
9
  const [password, setPassword] = React.useState("");
10
  const [pendingVerification, setPendingVerification] = React.useState(false);
11
  const [code, setCode] = React.useState("");
12

13
  // start the sign up process.
14
  const onSignUpPress = async () => {
15
    if (!isLoaded) {
16
      return;
17
    }
18

19
    try {
20
      await signUp.create({
21
        emailAddress,
22
        password,
23
      });
24

25
      // send the email.
26
      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
27

28
      // change the UI to our pending section.
29
      setPendingVerification(true);
30
    } catch (err: any) {
31
      console.error(JSON.stringify(err, null, 2));
32
    }
33
  };
34

35
  // This verifies the user using email code that is delivered.
36
  const onPressVerify = async () => {
37
    if (!isLoaded) {
38
      return;
39
    }
40

41
    try {
42
      const completeSignUp = await signUp.attemptEmailAddressVerification({
43
        code,
44
      });
45

46
      await setActive({ session: completeSignUp.createdSessionId });
47
    } catch (err: any) {
48
      console.error(JSON.stringify(err, null, 2));
49
    }
50
  };
51

52
  return (
53
    <View>
54
      {!pendingVerification && (
55
        <View>
56
          <View>
57
            <TextInput
58
              autoCapitalize="none"
59
              value={emailAddress}
60
              placeholder="Email..."
61
              onChangeText={(email) => setEmailAddress(email)}
62
            />
63
          </View>
64

65
          <View>
66
            <TextInput
67
              value={password}
68
              placeholder="Password..."
69
              placeholderTextColor="#000"
70
              secureTextEntry={true}
71
              onChangeText={(password) => setPassword(password)}
72
            />
73
          </View>
74

75
          <TouchableOpacity onPress={onSignUpPress}>
76
            <Text>Sign up</Text>
77
          </TouchableOpacity>
78
        </View>
79
      )}
80
      {pendingVerification && (
81
        <View>
82
          <View>
83
            <TextInput
84
              value={code}
85
              placeholder="Code..."
86
              onChangeText={(code) => setCode(code)}
87
            />
88
          </View>
89
          <TouchableOpacity onPress={onPressVerify}>
90
            <Text>Verify Email</Text>
91
          </TouchableOpacity>
92
        </View>
93
      )}
94
    </View>
95
  );
96
}

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8" />
6
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
    <title>Clerk JavaScript Email + Password</title>
9
</head>
10

11
<body>
12
    <h1>Clerk JavaScript Email + Password</h1>
13

14
    <div id="auth-signup">
15
        <input placeholder="email" id="email" type="email"></input>
16
        <input placeholder="password" id="password" type="password"></input>
17
        <button onclick="SignUp()">SignUp</button>
18

19
    </div>
20
    <div id="auth-verification" hidden="true">
21
        <input placeholder="code" id="code" type="text"></input>
22
        <button onclick="VerifyEmailAddress()">Verify</button>
23
    </div>
24

25
    <div id="user-button" />
26
    <script>
27
        const SignUp = async () => {
28
            const emailAddress = document.getElementById('email').value;
29
            const password = document.getElementById('password').value;
30
            const {client} = window.Clerk;
31
            try {
32
                await client.signUp.create({
33
                    emailAddress,
34
                    password
35
                });
36
                await client.signUp.prepareEmailAddressVerification();
37
                //hide signup form
38
                document.getElementById('auth-signup').hidden = true;
39
                //show verification form
40
                document.getElementById('auth-verification').hidden = false;
41
            }
42
            catch (err) {
43
                console.log(err)
44
            }
45
        };
46
        const VerifyEmailAddress = async () => {
47
            const code = document.getElementById('code').value;
48
            const {client, setActive} = window.Clerk;
49
            try {
50
                // Verify the email address.
51
                const verify = await client.signUp.attemptEmailAddressVerification({
52
                    code
53
                });
54
                // user is created now set the session to active this never is not null.
55
                await setActive({session: verify.createdSessionId})
56
            }
57

58
            catch (err) {
59
                console.log(err)
60
            }
61
        }
62
    </script>
63
    // Script to load Clerk up
64
    <script src="src/script.js" async crossorigin="anonymous"></script>
65
</body>
66

67
</html>

In email/password authentication, the sign-in is a process that requires users to provide their email address and their password and authenticates them by creating a new session for the user.

1
"use client"
2
import { useState } from "react";
3
import { useSignIn } from "@clerk/nextjs";
4
import { useRouter } from "next/router";
5

6
export default function SignInForm() {
7
  const { isLoaded, signIn, setActive } = useSignIn();
8
  const [emailAddress, setEmailAddress] = useState("");
9
  const [password, setPassword] = useState("");
10
  const router = useRouter();
11
  // start the sign In process.
12
  const handleSubmit = async (e) => {
13
    e.preventDefault();
14
    if (!isLoaded) {
15
      return;
16
    }
17

18
    try {
19
      const result = await signIn.create({
20
        identifier: emailAddress,
21
        password,
22
      });
23

24
      if (result.status === "complete") {
25
        console.log(result);
26
        await setActive({ session: result.createdSessionId });
27
        router.push("/")
28
      }
29
      else {
30
        /*Investigate why the login hasn't completed */
31
        console.log(result);
32
      }
33

34
    } catch (err: any) {
35
      console.error("error", err.errors[0].longMessage)
36
    }
37
  };
38

39
  return (
40
    <div>
41
      <form>
42
        <div>
43
          <label htmlFor="email">Email</label>
44
          <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
45
        </div>
46
        <div>
47
          <label htmlFor="password">Password</label>
48
          <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
49
        </div>
50
        <button onClick={handleSubmit}>Sign In</button>
51
      </form>
52
    </div>
53
  );
54
}

1
import { useState } from "react";
2
import { useSignIn } from "@clerk/nextjs";
3
import { useRouter } from "next/router";
4

5
export default function SignInForm() {
6
  const { isLoaded, signIn, setActive } = useSignIn();
7
  const [emailAddress, setEmailAddress] = useState("");
8
  const [password, setPassword] = useState("");
9
  const router = useRouter();
10
  // start the sign In process.
11
  const handleSubmit = async (e) => {
12
    e.preventDefault();
13
    if (!isLoaded) {
14
      return;
15
    }
16

17
    try {
18
      const result = await signIn.create({
19
        identifier: emailAddress,
20
        password,
21
      });
22

23
      if (result.status === "complete") {
24
        console.log(result);
25
        await setActive({ session: result.createdSessionId });
26
        router.push("/")
27
      }
28
      else {
29
        /*Investigate why the login hasn't completed */
30
        console.log(result);
31
      }
32

33
    } catch (err: any) {
34
      console.error("error", err.errors[0].longMessage)
35
    }
36
  };
37

38
  return (
39
    <div>
40
      <form>
41
        <div>
42
          <label htmlFor="email">Email</label>
43
          <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
44
        </div>
45
        <div>
46
          <label htmlFor="password">Password</label>
47
          <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
48
        </div>
49
        <button onClick={handleSubmit}>Sign In</button>
50
      </form>
51
    </div>
52
  );
53
}

1
import { useState } from "react";
2
import { useSignIn } from "@clerk/clerk-react";
3

4
export default function SignInForm() {
5
  const { isLoaded, signIn, setActive } = useSignIn();
6
  const [emailAddress, setEmailAddress] = useState("");
7
  const [password, setPassword] = useState("");
8
  // start the sign In process.
9
  const handleSubmit = async (e) => {
10
    e.preventDefault();
11
    if (!isLoaded) {
12
      return;
13
    }
14

15
    try {
16
      const result = await signIn.create({
17
        identifier: emailAddress,
18
        password,
19
      });
20

21
      if (result.status === "complete") {
22
        await setActive({ session: result.createdSessionId });
23
        // redirect the user how you see fit.
24
      }
25
      else {
26
        /*Investigate why the login hasn't completed */
27
        console.log(result);
28
      }
29

30
    } catch (err: any) {
31
      console.error("error", err.errors[0].longMessage)
32
    }
33
  };
34

35
  return (
36
    <div>
37
      <form>
38
        <div>
39
          <label htmlFor="email">Email</label>
40
          <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
41
        </div>
42
        <div>
43
          <label htmlFor="password">Password</label>
44
          <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
45
        </div>
46
        <button onClick={handleSubmit}>Sign In</button>
47
      </form>
48
    </div>
49
  );
50
}

1
import { useState } from "react";
2
import { useSignIn } from "@clerk/remix";
3

4
export default function SignInForm() {
5
  const { isLoaded, signIn, setActive } = useSignIn();
6
  const [emailAddress, setEmailAddress] = useState("");
7
  const [password, setPassword] = useState("");
8
  // start the sign In process.
9
  const handleSubmit = async (e) => {
10
    e.preventDefault();
11
    if (!isLoaded) {
12
      return;
13
    }
14

15
    try {
16
      const result = await signIn.create({
17
        identifier: emailAddress,
18
        password,
19
      });
20

21
      if (result.status === "complete") {
22
        await setActive({ session: result.createdSessionId });
23
        // redirect the user how you see fit.
24
      }
25
      else {
26
        /*Investigate why the login hasn't completed */
27
        console.log(result);
28
      }
29

30
    } catch (err: any) {
31
      console.error("error", err.errors[0].longMessage)
32
    }
33
  };
34

35
  return (
36
    <div>
37
      <form>
38
        <div>
39
          <label htmlFor="email">Email</label>
40
          <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
41
        </div>
42
        <div>
43
          <label htmlFor="password">Password</label>
44
          <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
45
        </div>
46
        <button onClick={handleSubmit}>Sign In</button>
47
      </form>
48
    </div>
49
  );
50
}

1
import { useState } from "react";
2
// Use React for Gatsby
3
import { useSignIn } from "@clerk/clerk-react";
4

5
export default function SignInForm() {
6
  const { isLoaded, signIn, setActive } = useSignIn();
7
  const [emailAddress, setEmailAddress] = useState("");
8
  const [password, setPassword] = useState("");
9
  // start the sign In process.
10
  const handleSubmit = async (e) => {
11
    e.preventDefault();
12
    if (!isLoaded) {
13
      return;
14
    }
15

16
    try {
17
      const result = await signIn.create({
18
        identifier: emailAddress,
19
        password,
20
      });
21

22
      if (result.status === "complete") {
23
        await setActive({ session: result.createdSessionId });
24
        // redirect the user how you see fit.
25
      }
26
      else {
27
        /*Investigate why the login hasn't completed */
28
        console.log(result);
29
      }
30

31
    } catch (err: any) {
32
      console.error("error", err.errors[0].longMessage)
33
    }
34
  };
35

36
  return (
37
    <div>
38
      <form>
39
        <div>
40
          <label htmlFor="email">Email</label>
41
          <input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
42
        </div>
43
        <div>
44
          <label htmlFor="password">Password</label>
45
          <input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
46
        </div>
47
        <button onClick={handleSubmit}>Sign In</button>
48
      </form>
49
    </div>
50
  );
51
}

1
import React from "react";
2
import { Text, TextInput, TouchableOpacity, View } from "react-native";
3
import { useSignIn } from "@clerk/clerk-expo";
4

5
export default function SignInScreen() {
6
  const { signIn, setActive, isLoaded } = useSignIn();
7

8
  const [emailAddress, setEmailAddress] = React.useState("");
9
  const [password, setPassword] = React.useState("");
10

11
  const onSignInPress = async () => {
12
    if (!isLoaded) {
13
      return;
14
    }
15

16
    try {
17
      const completeSignIn = await signIn.create({
18
        identifier: emailAddress,
19
        password,
20
      });
21
      if (completeSignIn.status === "complete") {
22
        await setActive({ session: result.createdSessionId });
23
        // redirect the user how you see fit.
24
      }
25
      else {
26
        /*Investigate why the login hasn't completed */
27
        console.log(result);
28
      }
29

30
    } catch (err: any) {
31
      console.log(err);
32
    }
33
  };
34
  return (
35
    <View>
36
      <View>
37
        <TextInput
38
          autoCapitalize="none"
39
          value={emailAddress}
40
          placeholder="Email..."
41
          onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
42
        />
43
      </View>
44

45
      <View>
46
        <TextInput
47
          value={password}
48
          placeholder="Password..."
49
          secureTextEntry={true}
50
          onChangeText={(password) => setPassword(password)}
51
        />
52
      </View>
53

54
      <TouchableOpacity onPress={onSignInPress}>
55
        <Text>Sign in</Text>
56
      </TouchableOpacity>
57
    </View>
58
  );
59
}

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8" />
6
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
    <title>Clerk JavaScript Email + Password</title>
9
</head>
10

11
<body>
12
    <h1>Clerk JavaScript Email + Password</h1>
13

14
    <div id="auth-signin">
15
        <input placeholder="email" id="email" type="email"></input>
16
        <input placeholder="password" id="password" type="password"></input>
17
        <button onclick="SignIn()">SignIn</button>
18

19
    </div>
20
    <script>
21
        const SignIn = async () => {
22
            const emailAddress = document.getElementById('email').value;
23
            const password = document.getElementById('password').value;
24
            const {client} = window.Clerk;
25
            try {
26
               const signInAttempt = await client.signIn.create({
27
                    emailAddress,
28
                    password
29
                });
30
               if (signInAttempt.status === "complete") {
31
                 await setActive({ session: signInAttempt.createdSessionId });
32
                 // redirect the user how you see fit.
33
               }
34
               else {
35
                 /*Investigate why the login hasn't completed */
36
                 console.log(signInAttempt);
37
               }
38
            }
39
            catch (err) {
40
                console.log(err)
41
            }
42
        };
43
    </script>
44
    // Script to load Clerk up
45
    <script src="src/script.js" async crossorigin="anonymous"></script>
46
</body>
47

48
</html>

Email & Password

Learn how to set up authentication using a password.

Before you start

Configuration

Sign up using a custom flow

Sign in using a custom flow