Setup Authentication

Saves 16 hours of work

Prerequisites

• GateUI Installed

If you haven't installed GateUI yet, follow the GateUI installation guide.

Installation

1. Open your terminal
2. Navigate to your project folder
3. Run the following command:

js
npx @gateui/cli add auth
Copy code

This will copy all the authentication code to your codebase. Continue below to see more in details what is added to the codebase.

How to use

All you need to do is use the LoginWithMagicLink component in where you want the login to be such as in a /login route or modal.

Example Login Page

jsx
import { LoginWithMagicLink } from "@/components/auth";
Copy code
jsx
import { getUser } from "@/lib/auth";
Copy code
jsx

Copy code
jsx
export default async function LoginPage() {
Copy code
jsx
  // --- STATE ---
Copy code
jsx
  const isLoggedIn = Boolean(await getUser())
Copy code
jsx

Copy code
jsx
  // --- RENDER ---
Copy code
jsx
  if(isLoggedIn) {
Copy code
jsx
    // redirect to homepage
Copy code
jsx
  }
Copy code
jsx

Copy code
jsx
  return (<div>
Copy code
jsx
    <h1>Welcome to MyApp</h1>
Copy code
jsx
    
Copy code
jsx
    <LoginWithMagicLink enabledProviders={["google"]} />
Copy code
jsx
    </div>)
Copy code
jsx
}
Copy code

API Overview

All the necessary code has been installed in the following places:

Need Help?

If you encounter any issues, please open an issue on my GitHub repository. I'll respond as soon as possible.