Skip to content
EvolveEvolveEvolve

feature-auth

@evolve-storefront/feature-auth · v2.0.0 snapshot (4ad5277) · Storybook ↗

Sign-in for the storefront: login, registration, password reset (request a link and set a new password) and logout, by email and password. The package runs the mutations and ships the forms. Your app keeps the session: it passes a provider that stores it, so this package never touches cookies.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/feature-auth @labdigital/graphql-fetcher @tanstack/react-query graphql next next-intl react
    Requirements6
    @labdigital/graphql-fetcher>=3
    @tanstack/react-query>=5
    graphql>=16
    next>=16.2.11 <17
    next-intl>=4
    react>=19

  2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

    @import "@evolve-storefront/feature-auth/styles.css";

  3. Wrap your app in AuthProvider. Setup lists its props.

  4. Add its translations to your message files with evolve messages.

Then render it on a page:

"use client";


import { LoginForm } from "@evolve-storefront/feature-auth/login-form";
import { AuthProvider } from "@evolve-storefront/feature-auth/provider";
import { useRouter } from "next/navigation";


export function LoginPage() {
  const router = useRouter();


  return (
    <AuthProvider
      onAuthenticated={() => router.push("/account")}
      onLoggedOut={() => router.push("/")}
    >
      <LoginForm />
    </AuthProvider>
  );
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

LoginFormSign in with email + password on the evolve-feature-form pattern.
CheckoutReturningCustomer"Welcome back" under the checkout's email, for an address that has an account: a password and a secondary "Sign in", so the section's own continue stays the one primary action and guest checkout the main path.
SignInDialogSign in without leaving the page that asked for it, so the product and scroll position the buyer was at survive.
RegisterFromOrderFormCreate an account after a guest order with just a password: the email and names come from the order.
RegisterFormCreate an account on the evolve-feature-form pattern.
PasswordResetRequestFormRequest a password-reset email.
PasswordResetFormSet a new password from a reset token.
LogoutButtonLog out the current customer.
PasswordStrengthIndicatorPassword strength meter (AUTH §4) — guidance only, never enforcement (the backend owns the weak-password rule).

Hooks

14 hooks to read and change the data yourself, for when you build your own UI. All hooks

More in this package

  • Setup and server: what the package needs in your project.
  • Advanced: contexts, data and cache helpers, schemas, other functions and constants, types.