05.12.2024 в 13:36

Анонимный вход с использованием better_auth, nextjs, prisma, shadcn

Это руководство описывает реализацию анонимного входа в веб-приложение, используя безопасный и удобный стек технологий. Функция анонимного входа позволит пользователям взаимодействовать с приложением без предварительной регистрации, с последующей возможностью преобразования анонимных сессий в аутентифицированные учетные записи. Это обеспечит улучшенный пользовательский опыт, сохраняя при этом безопасность и масштабируемость.

Технологический стек:

Better_Auth v1: Легкая и расширяемая библиотека аутентификации на TypeScript.
Next.js: Мощный фреймворк React для создания серверных приложений.
Prisma: Современная ORM для эффективного и типобезопасного взаимодействия с базами данных.
ShadCN: Библиотека компонентов для быстрой разработки пользовательского интерфейса.
TailwindCSS: Популярный CSS-фреймворк для создания современных интерфейсов.
Sendgrid: Надежный сервис электронной почты для отправки одноразовых паролей.

Предварительные требования:

Установлен Node.js (версия LTS).
Менеджер пакетов (npm, yarn, или pnpm — в этом руководстве используется pnpm).
Экземпляр базы данных PostgreSQL (локальный или хостинг, например, Supabase или PlanetScale). Для локальной работы рекомендуется Docker.
Знакомство с TypeScript, Next.js и Prisma.

Клонирование стартового проекта

Это руководство основывается на аутентификации по электронной почте и паролю, а также на проверке электронной почты. Вы можете:

Начать с нуля, следуя инструкциям по аутентификации по электронной почте и проверке электронной почты.

Или клонировать стартовый проект (ссылка на проект).

git clone -b feat-username https://github.com/Daanish2003/better_auth_nextjs.git

Перейдите в каталог проекта и установите зависимости:

pnpm install

Настройка

Настройка .env файл

Создайте .env файл в корне вашего проекта и добавьте следующие конфигурации:

# Authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with a secure key
BETTER_AUTH_URL="http://localhost:3000"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Database settings
POSTGRES_PASSWORD="your-password"
POSTGRES_USER="your-username"
DATABASE_URL="postgresql://your-username:your-password@localhost:5432/mydb?schema=public"

# Resend API Key
RESEND_API_KEY="your-resend-api-key"

Если вы используете Docker для PostgreSQL, запустите контейнер:

docker compose up -d

Обновление файла schema.prisma

Откройте schema.prisma файл в папке вашего проекта, а затем обновите user модель в схеме, добавив isAnonymous в нее столбец с необязательным типом строки.

model User {
  id               String      @id @default(cuid())
  name             String
  email            String
  emailVerified    Boolean     @default(false)
  image            String?
  createdAt        DateTime    @default(now())
  updatedAt        DateTime    @updatedAt
  twoFactorEnabled Boolean     @default(false)
  username         String?
  // Add anonymous column to user model
  isAnonymous      Boolean?
  Session          Session[]
  Account          Account[]
  TwoFactor        TwoFactor[] // if you implemented 2FA add this column

  @@unique([email])
  @@map("user")
}

Затем сгенерируйте и перенесите файл Prisma с помощью команды ниже.

pnpx prisma generate
pnpx prisma migrate dev --name anonymous

Обновление auth.ts и сохранение auth-client.ts

Откройте auth.ts файл в репозитории вашего проекта, а затем добавьте anonymous() плагин в массив плагинов функции betterAuth.

// src/lib/auth.ts
import { betterAuth } from "better-auth"
import { username } from "better-auth/plugins"

const auth = betterAuth({
    // other config options
    plugins: [ 
        // other plugins
        anonymous({
         // optional to add this
         emailDomainName: "exmaple.com" // Adding the email domain name to user
         //Note: user model, account model and session model is automatically transfer when user signup using their email. 
// There is no need to transfer the user, account, session model table data. 
// If you have other data of user then use the option below to transfer the data
         onLinkAccount: () => {
         // if you want transfer the guest users all the data like preference, carts, or items  after login. Please use this option to update data in your database
}
        }) 
    ] 
})

Затем откройте auth-client.ts файл в репозитории вашего проекта и добавьте anonymousClient() функцию плагина в массив плагинов.

// src/lib/auth-client.ts
import { createAuthClient } from "better-auth/client"
import { anonymousClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
    baseURL: process.env.NEXT_PUBLIC_APP_URL,
    plugins: [ 
         // other plugin options
        anonymousClient() 
    ] 
})

export const {
    signIn,
    signOut,
    signUp,
    useSession
} = authClient;

Создание компонента anonymous-button

Создайте anonymous-button.tsx внутри components/auth/ папки и вставьте код ниже

// src/components/auth/anonymous-button.tsx
import React from 'react'
import { Button } from '../ui/button'
import { User } from 'lucide-react'
import { authClient } from '@/lib/auth-client'
import { useAuthState } from '@/hooks/useAuthState'
import { useRouter } from 'next/navigation'

const AnonymousButton = () => {
    const router = useRouter();
    // handler error, success, and loading state
    const {setSuccess, setError, setLoading, resetState } = useAuthState();
    const handleSignInAnonymous = async () => {
        try {
            await authClient.signIn.anonymous({
                fetchOptions: {
                    onSuccess: () => {
                        setSuccess("LoggedIn successfully")
                        router.replace('/')
                    },
                    onError: (ctx) => setError(ctx.error.message),
                    onRequest: () => {
                        resetState()
                        setLoading(true)
                    },
                    onResponse: () => setLoading(true)
                }
            })

        } catch(error) {
            console.log(error)
            setError("Something went wrong")
        }

    }
  return (
    <Button className='w-28' onClick={handleSignInAnonymous}>
        <User />
        Guest
    </Button>
  )
}
export default AnonymousButton

Этот компонент обрабатывает логику anonymous входа в систему.

Обновление компонента SignIn и компонента Signup

Компонент регистрации:

// src/components/auth/sign-up.tsx
"use client"

// other imports
import AnonymousButton from "./anonymos-button";

const SignUp = () => {

    // Other functions and logics 

    return (
        <CardWrapper
            cardTitle='SignUp'
            cardDescription='Create an new account'
            cardFooterLink='/signin'
            cardFooterDescription='Already have an account?'
            cardFooterLinkTitle='Signin'
        >
            <Form {...form}>
                 <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}> 
                 {/* FormFields example: Email, password and other*/} 
                 {/* Add the Anonymous login button below inside the form*/}
                 <AnonymousButton />
                 </form>
            </Form>
        </CardWrapper>
    )
}

export default SignUp

Добавьте AnonymousButton компонент в SignUp:

Нажав кнопку «Анонимно», пользователь сможет войти в систему анонимно.

Компонент входа

// components/auth/sign-in.tsx

"use client";

// other imports
import AnonymousButton from "./anonymos-button";

const SignIn = () => {
    // other function

    return (
        <CardWrapper
            cardTitle="Sign In"
            cardDescription="Enter your email or username below to login to your account"
            cardFooterDescription="Don't have an account?"
            cardFooterLink="/signup"
            cardFooterLinkTitle="Sign up"
        >
            <Form {...form}>
                <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
                    {/* Email or Username Field */}
                    {/* All other exisitng formfields like password and form message */}
                    {/* Add Anonynous button here */}
                    <AnonymousButton />
                </form>
            </Form>
        </CardWrapper>
    );
};

export default SignIn;

Добавление AnonymousButton в SignIn:

Нажав кнопку «Анонимно», пользователь сможет войти в систему анонимно.

Запуск приложения

Запустите свой сервер разработки:

pnpm dev

Перейдите к своему sign-up маршруту sign-in и попробуйте войти анонимно.

Заключение

Вы успешно внедрили анонимный вход в ваше приложение. Теперь пользователи могут свободно изучать его возможности без обязательной регистрации, что повышает удобство и привлекательность. Плавный переход от анонимных сессий к учетным записям обеспечивает гибкость и безопасность для ваших пользователей.