Quick Start

Get started with MagenX404 in 3 minutes

Installation

Install the package:

npm

npm install magenx404

yarn add magenx404

bun add magenx404

Next.js Setup

If you’re using Next.js, add this to your next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["magenx404"],
};

export default nextConfig;

Make sure to restart your Next.js dev server after adding this configuration.

Basic Usage

Here’s a complete example using the TimeLock feature:

"use client";

import { useState, useEffect } from "react";
import { X404TimeLock } from "magenx404";
import { detectWallets, getGeolocationData } from "magenx404/utils";

function App() {
  const [wallets, setWallets] = useState([]);
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null,
    isFetching: false,
  });

  useEffect(() => {
    async function fetchLocation() {
      const locationdata = await getGeolocationData();
      setLocation({
        latitude: locationdata.latitude || null,
        longitude: locationdata.longitude || null,
        error: locationdata.error || null,
        isFetching: false,
      });
    }
    fetchLocation();
  }, []);

  useEffect(() => {
    let wallets = detectWallets();
    setWallets(wallets);
  }, []);

  const RUN = async (wallet) => {
    const result = await X404TimeLock({
      wallet: wallet, // Optional - modal will show if not provided
      required_mint: "TOKEN_CA",
      mint_amount: "1000000",
      min_hold_duration_days: 30,
      geo_code: "true", // or "false"
      geo_code_locs: "US,UK", // Country codes
      coords: {
        latitude: location.latitude,
        longitude: location.longitude,
      },
    });

    if (result.success) {
      console.log(result.token);
      // Token is automatically stored in localStorage as "sjwt404_timelock"
      alert("authenticated");
      // RUN YOUR CUSTOM LOGIC HERE
    } else {
      switch (result.error) {
        case "INSUFFICIENT_TOKENS":
          alert(`You need more tokens to access`);
          break;
        case "LOCATION_DENIED":
          alert("Access denied for your location");
          break;
        case "LOCATION_ERROR":
          alert("Location permission denied");
          break;
        default:
          alert(result.message || "Authentication failed");
      }
    }
  };

  return (
    <div>
      {wallets.map((wallet, index) => (
        <button key={index} onClick={() => RUN(wallet)}>
          Connect {wallet}
        </button>
      ))}
    </div>
  );
}

export default App;

Available Features

You can import all features from the main package:

import {
  X404Blacklist,
  X404TimeLock,
  X404MultiToken,
  X404Activity,
  X404Tier,
  X404NoDebt,
  X404Age,
} from "magenx404";
import { detectWallets, getGeolocationData } from "magenx404/utils";

Next Steps

Explore Features

Learn about each authentication feature

View Examples

See more implementation examples

API Reference

Complete API documentation