jsoncrack.com is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.
We, at TThroo, 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.
Signin
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't have an account?
</Anchor>
</Center>
</Layout>
);
};
export default SignIn;
Layout, 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 is used to sign in with password
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 is used to sign in with Google or Github.
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. We also see the how this sign-in component used @mantine/core components. If you have any questions, feel free to email us at ram@tthroo.com
Top comments (0)