JSONCrack Codebase Analysis — Part 3 — Signin
Tags: webdev, opensource, javascript, nextjs
Published: 2024-01-03 23:03:50

[jsoncrack.com](https://jsoncrack.com/sign-up) is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

We, at [TThroo](https://tthroo.com/), love open source and perform codebase analysis on popular repositories, document, and provide a detailed explanation of the codebase. This enables OSS enthusiasts to learn and contribute to open source projects, and we also apply these learnings in our projects.

In this post, let’s understand the signin functionality used in [jsoncrack.com](https://jsoncrack.com/sign-up).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4mjnb5xvcz44cjqawqa.png)

## Signin
[src/pages/sign-in.tsx](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/pages/sign-in.tsx) has the code. Again, let’s do a top down approach.

You will see this file does the following export at the end of file

```
const SignIn = () => {
  const { isReady, push, query } = useRouter();
  const session = useSession();
  const isPasswordReset = query?.type === "recovery" && !query?.error;

  React.useEffect(() => {
    if (isIframe()) push("/");
    if (isReady && session && !isPasswordReset) push("/editor");
  }, [isReady, session, push, isPasswordReset]);

  return (
    <Layout>
      <Head>
        <title>Sign In - JSON Crack</title>
      </Head>
      <Paper mt={50} mx="auto" maw={400} p="lg" withBorder>
        <AuthenticationForm />
      </Paper>
      <Center my="xl">
        <Anchor component={Link} prefetch={false} href="/sign-up" c="dark" fw="bold">
          Don&apos;t have an account?
        </Anchor>
      </Center>
    </Layout>
  );
};

export default SignIn;
```


[Layout](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/layout/Layout/index.tsx), Head are known components. Paper is an import from @mantine/core. The real stuff is in AuthenticationForm.

## Authentication Form

```
export function AuthenticationForm(props: PaperProps) {
  const setSession = useUser(state => state.setSession);
  const [loading, setLoading] = React.useState(false);
  const [userData, setUserData] = React.useState({
    name: "",
    email: "",
    password: "",
  });

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);

    supabase.auth
      .signInWithPassword({
        email: userData.email,
        password: userData.password,
      })
      .then(({ data, error }) => {
        if (error) return toast.error(error.message);
        setSession(data.session);
      })
      .finally(() => setLoading(false));
  };

  const handleLoginClick = (provider: "github" | "google") => {
    supabase.auth.signInWithOAuth({
      provider,
      options: { redirectTo: "https://jsoncrack.com/editor" },
    });
  };

  return (
    <Paper {...props}>
      <form onSubmit={onSubmit}>
        <Stack>
          <TextInput
            name="email"
            required
            label="Email"
            placeholder="hello@jsoncrack.com"
            value={userData.email}
            onChange={event => setUserData(d => ({ ...d, email: event.target.value }))}
            radius="sm"
            style={{ color: "black" }}
          />

          <PasswordInput
            name="password"
            required
            label="Password"
            placeholder="∗∗∗∗∗∗∗∗∗∗∗"
            value={userData.password}
            onChange={event => setUserData(d => ({ ...d, password: event.target.value }))}
            radius="sm"
            style={{ color: "black" }}
          />

          <Button color="dark" type="submit" radius="sm" loading={loading}>
            Sign in
          </Button>

          <Stack gap="sm" mx="auto" align="center">
            <Anchor component={Link} prefetch={false} href="/forgot-password" c="dark" size="xs">
              Forgot your password?
            </Anchor>
          </Stack>
        </Stack>
      </form>

      <Divider my="lg" />

      <Stack mb="md" mt="md">
        <Button
          radius="sm"
          leftSection={<AiOutlineGoogle size="20" />}
          onClick={() => handleLoginClick("google")}
          color="red"
          variant="outline"
        >
          Sign in with Google
        </Button>
        <Button
          radius="sm"
          leftSection={<AiOutlineGithub size="20" />}
          onClick={() => handleLoginClick("github")}
          color="dark"
          variant="outline"
        >
          Sign in with GitHub
        </Button>
      </Stack>
    </Paper>
  );
}
```

It is a simple component with input elements and social login buttons.

## Sign in using email
onSubmit function is called when you try to login with your email and password.
As you can see [supabase](https://supabase.com/) is used to [sign in with password](https://supabase.com/docs/reference/javascript/auth-signinwithpassword)

## Sign in using Google or Github
handleLoginClick function is called when you try to login with either Google or Github account.
As you can see [supabase](https://supabase.com/) is used to [sign in with Google or Github](https://supabase.com/docs/guides/auth/social-login/auth-google).

We recommend to check the supabase docs to read further how you can easily solve/implement Auth into your application.

## Conclusion
Supabase has simplified the Auth used in [jsoncrack.com](https://jsoncrack.com/). We also see the how this sign-in component used [@mantine/core](https://mantine.dev/) components. If you have any questions, feel free to email us at ram@tthroo.com