Skip to main content

Authentication

FileKit application offers two distinct authentication methods to accommodate different user preferences and use cases: Magic Login and Demo Login. Each method provides a unique way of accessing the system, ensuring flexibility and convenience while maintaining security. Below, we explain each method, outlining their processes and when they might be best utilized.

Let's discuss about these two methods.

Magic Login​

Magic Login provides a passwordless authentication method that enhances user convenience and security. It works by sending a verification email to the user's email address with a secure verification token. When the user clicks on the verification link in the email, they are logged in automatically.

How Magic Login Works​

  • User Request: The user enters their email address on the login page and requests to log in.
  • Email Verification: The system sends an email to the provided address with a unique verification link.
  • Authentication: The user clicks on the verification link, which contains the token. The system verifies the token and logs the user in automatically.

Advantages of Magic Login​

  • Enhanced Security: Reduces the risk of password-related breaches.
  • User Convenience: Eliminates the need for users to remember and enter passwords.
  • Improved User Experience: Streamlines the login process, particularly on mobile devices.

Demo Login​

Demo Login is designed for quick and hassle-free access, particularly useful in demonstrations or testing environments. It involves pre-created user accounts by the authority, and users can log in by simply entering the specific email associated with these accounts.

How Demo Login Works​

  • Pre-Created Accounts: The system administrator sets up demo accounts with predefined credentials.
  • Simplified Login: Users enter the email address associated with a demo account on the login page. No password is required..
  • Immediate Access: The system recognizes the demo email and grants immediate access to the application.

Advantages of Demo Login​

  • Ease of Access: Ideal for situations where quick or temporary access is needed, such as demos or presentations..
  • Controlled Environment: Allows users to explore the application in a controlled setting without affecting live data..
  • Simplicity: Removes the barriers of registration and email verification for first-time or one-time users.

For Demo purpose we used demo-login. You can easily replaced the demo-login with magic-login. Simply follow the instructions below.

src/components/organisms/authentication/email-login.tsx
'use client';

import { useState } from 'react';
import Link from 'next/link';
- import { demoLogin } from '@/server/actions/auth.action';
+ import { magicLogin } from '@/server/actions/auth.action';
import { Button, Input, Text } from 'rizzui';
import { toast } from 'sonner';

import { Envelop } from '@/components/atoms/icons/envelop';
import { GoogleIcon } from '@/components/atoms/icons/google';
import { Box, Flex } from '@/components/atoms/layout';
import { useSearchParams } from '@/components/atoms/next/navigation';

- const demoMail = 'demo@filekit.com';

export const EmailLogin = () => {
  const [isLoading, setIsLoading] = useState(false);
  const searchParams = useSearchParams();

  const handleSubmit = async (event: any) => {
    event.preventDefault();
    setIsLoading(true);

    const { email } = event.target.elements;

    if (!email.value) {
      toast.error('Please enter an email.');
      setIsLoading(false);
      return;
    }

-    const response = await demoLogin(email.value);
+    const response = await magicLink(email.value);

    setIsLoading(false);
    if (!response.ok) {
      toast.error('Sign in failed. Please try again.');
      return;
    }

+    toast('Please check your email for a magic link.');
  };

  return (
    <form method="post" onSubmit={handleSubmit} className="space-y-2">
      <Box>
        <Input
-          readOnly={true}
-          value={demoMail}
          autoComplete="no"
          name="email"
          type="email"
          placeholder="Enter your email"
          className="[&_.rizzui-input-container]:bg-white dark:[&_.rizzui-input-container]:bg-transparent [&_.rizzui-input-container]:focus:ring-gray-500 [&_.rizzui-input-container_input]:w-full lg:[&_.rizzui-input-container]:h-14 [&_.rizzui-input-container]:w-full 3xl:[&_.rizzui-input-container]:w-full [&_.rizzui-input-container]:px-3 md:[&_.rizzui-input-container]:px-5 xl:[&_.rizzui-input-container]:px-7"
          inputClassName="[&.is-focus]:border-gray-500 ring-[#CBD5E1] dark:ring-[#3B404F] [&.is-focus]:ring-2 [&.is-focus]:ring-[#CBD5E1] dark:[&.is-focus]:ring-[#3B404F] [&.is-hover]:border-0 border-0 ring-1 lg:text-base text-[#475569] dark:text-steel-100/40"
          prefix={<Envelop className="w-5 md:w-6 h-5 md:h-6" />}
        />
      </Box>
      <Button
        type="submit"
        isLoading={isLoading}
        className="flex font-semibold items-center justify-center w-full h-10 lg:h-14 !mt-5 text-sm lg:text-base text-white transition-all !bg-custom-black dark:bg-steel-600 hover:dark:bg-steel-600/80  border border-black rounded-md hover:!bg-opacity-90 focus:outline-none hover:shadow-sm "
      >
        Sign In
      </Button>
    </form>
  );
};

);

You're finished. Users can now effortlessly log in using the Magic Link, enhancing both security and ease of access.