Руководство по внедрению Auth.js

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

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

В этом руководстве мы узнаем, что такое Auth.js, рассмотрим его историю и обсудим, почему вы должны использовать его в своих проектах. Чтобы продемонстрировать множество отличных функций Auth.js, мы создадим простое приложение Next.js, которое реализует аутентификацию пользователя, такую как вход в систему, регистрация и управление сеансами.

Что такое Auth.js?

Auth.js это наиболее полная библиотека JavaScript для аутентификации в любом веб-приложении. Она упрощает внедрение механизмов аутентификации пользователей в веб-приложения. С помощью Auth.js вы можете гибко использовать различные стратегии аутентификации, от простых комбинаций имени пользователя и пароля до сложных сервисов, таких как OAuth или системы единого входа.

Библиотека Auth.js имеет встроенную поддержку множества баз данных, включая MongoDB, PostgreSQL, MDQL, MariaDB и другие. Она также будет работать вообще без базы данных, если вы интегрируете ее со службами OAuth или веб-токенами JSON.

История создания Auth.js

Auth.js официально он назывался NextAuth, когда Иэн Коллинз впервые разработал его в 2016 году. В то время он сильно отличался от того инструмента, который мы знаем сегодня.

В 2020 году Балаж Орбан переписал и перезапустил проект, уделив особое внимание упрощению аутентификации пользователей. Next.js приложения. Это считается истинным началом NextAuth.

Когда библиотека начала осваиваться большим количеством разработчиков и внедрять поддержку большего числа фреймворков и вариантов использования, ее название было изменено с NextAuth на Auth.js . Этот шаг, который произошел в конце 2022 года, расширил сферу действия рамочной программы за пределы Next.js приложения для поддержки других фреймворков React.

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

Как Auth.js работает

Auth.js выполняет аутентификацию и авторизацию пользователя в веб-приложении. Он выполняет основные функции, такие как регистрация пользователя, управление логином, паролем и сеансами, а также контроль доступности для пользователей. На схеме ниже показано, как это работает в веб-приложении:

Почему стоит выбрать Auth.js?

Для такой важной функции, как аутентификация и авторизация, которая влияет на безопасность вашего приложения, вам следует подумать о том, почему вы должны использовать Auth.js вместо других фреймворков аутентификации. Давайте обсудим некоторые плюсы и минусы использования Auth.js в качестве основного фреймворка аутентификации:

• Производительность — По замыслу, Auth.js обладает невероятно высокой производительностью и минимально влияет на время, необходимое для загрузки приложения. Для снижения нагрузки на сервер используется эффективная аутентификация на основе токенов, в отличие от традиционных подходов, основанных на сеансах. Его архитектура гарантирует, что используемые вами процессы аутентификации будут оптимизированы для обеспечения высокой скорости
• Размер пакета — ядро Auth.js библиотека была создана с учетом малого веса, что делает размер пакета приложений небольшим. Это, в свою очередь, ускоряет загрузку вашего приложения с оптимальной производительностью, а также обеспечивает высокую производительность приложения даже при интеграции множества поставщиков аутентификации.
• Документация — Хотя Auth.js содержит подробные руководства, ссылки на API и примеры для разработчиков, высказываются критические замечания по поводу того, что в нем нет подробных руководств по миграции, которые позволили бы разработчикам перейти на новые версии платформы. Однако очевидно, что разработчики вкладывают средства в улучшение поддержки и обучения пользователей
• Интеграция — Его легко интегрировать Auth.js в Next.js приложение с поддержкой различных баз данных и ORM. Он поддерживает все популярные поставщики аутентификации, такие как Google, Facebook, GitHub и т.д., предоставляя разработчикам множество возможностей без использования сторонних библиотек.
• Простота использования/DX — Auth.js упрощает настройку аутентификации благодаря удобному API и более простым конфигурациям. Избавляя от необходимости внедрять аутентификацию с нуля, вы можете сосредоточиться на своей работе по разработке. Auth.js также предоставляет наилучший способ управления функциональными возможностями пользовательских сеансов, такими как постоянный вход в систему, тайм-ауты сеансов и управление файлами cookie.
• Кривая обучения Auth.js Для разработчиков, которые плохо знакомы с аутентификацией, она низкая, что помогает им больше сосредоточиться на приложении, а не на проблемах с аутентификацией.
• Сообщество и экосистема — Auth.js огромное и очень активное сообщество разработчиков работает над улучшением платформы, регулярно публикуя материалы, исправляя ошибки и добавляя новые функции. Существует множество блогов и руководств, которые помогут разработчикам с любым уровнем опыта найти ресурсы для изучения и ответы на вопросы.

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

• Кривая обучения — освоение Auth.js может быть сложным для разработчиков, которые долгое время использовали другие альтернативные фреймворки аутентификации. Этим группам разработчиков подход и концепции Auth.js могут показаться немного сложными, особенно если они хотят обрабатывать сложную аутентификацию
• Миграция на новые версии — Хотя документация Auth.js в целом хороша, нет надлежащего руководства по миграции, показывающего, как разработчики могут перейти с Auth.js v4 на v5. В результате многие разработчики не были готовы к переходу с v4 на v5 из-за непоследовательной и иногда неполной информации в разных версиях
• Настройки — Хотя Auth.js предоставляет различные возможности настройки, Auth.js v5, как известно, трудно настраивать. Это может быть особенно неприятно для разработчиков, которым нужна индивидуальная аутентификация для удовлетворения конкретных потребностей. Например, сложно добавить больше полей на страницу входа по умолчанию или стилизовать поток аутентификации.
• Нерешенные проблемы — Хотя команда Auth.js усердно работает над улучшением инструмента и исправлением ошибок, большое количество проблем GitHub и жалоб пользователей показывает, что многие проблемы еще не решены, и почти ежедневно появляются новые проблемы. Такая нестабильность злит большинство разработчиков и тратит впустую довольно много времени на разработку, а также может стать красным флагом для пользователя, который хочет использовать библиотеку для своих проектов.
• Излишне сложный — Если ваш проект очень маленький и у вас простые потребности в аутентификации, Auth.js будет излишним. Возможно, лучше использовать более простой или настраиваемый вариант аутентификации
• Специфические потребности фреймворка — Хотя Auth.js можно использовать с другими фреймворками, он в первую очередь предназначен для приложений Next.js. Таким образом, некоторые из этих функций не будут так гладко интегрированы для разработчиков, использующих другие фреймворки

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

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

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

Начало работы с Auth.js: Основные функции, которые необходимо знать

В этом разделе мы поговорим о том, как настроить Auth.js в вашем проекте и увидим некоторые из его выдающихся функций в действии.

Чтобы начать работу с Auth.js, вам необходимо установить его вместе с необходимыми зависимостями в вашем проекте. Для начала вы можете использовать приложение SvelteKit, Express.js или Next.js.

Для демонстрации в этом руководстве мы будем использовать его в приложении Next.js. Инструкции по установке в выбранной вами среде вы можете найти в официальной документации.

Сначала создайте новый проект Next.js, выполнив приведенную ниже команду:

npx create-next-app@latest

Затем установите пакет next-auth с помощью npm:

npm install next-auth

Затем создайте поставщика аутентификации. Для этой демонстрации мы будем использовать GitHub в качестве поставщика OAuth. Создайте файл .env.local в корневом каталоге вашего проекта и добавьте свой идентификатор клиента и секретный файл.:

GITHUB_ID=your-github-client-id 
GITHUB_SECRET=your-github-client-secret

Затем настройте провайдера в вашем pages/api/auth/[...nextauth].js и добавьте настройки провайдера:

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  pages: {
    signIn: '/auth/signin',
  },
});

Создание пользовательской страницы входа в систему

По умолчанию Auth.js предоставлена страница входа в систему. Однако вы можете использовать любую пользовательскую страницу входа, чтобы ее можно было легко настроить. Мы сделали это, добавив объект pages в конфигурацию NextAuth.

Теперь создайте файл pages/auth/signin.js для пользовательской страницы входа в систему и добавьте приведенные ниже фрагменты кода:

import { signIn } from 'next-auth/client';

const SignIn = () => {
  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn('github')}>Sign in with GitHub</button>
    </div>
  );
};

export default SignIn;

Защита страницы

Чтобы защитить страницу в вашем приложении от неавторизованных пользователей — например, страницу профиля — используйте механизм useSession, предоставляемый NextAuth. Создайте файл pages/profile.js и добавьте фрагменты кода, приведенные ниже.:

import { useSession } from 'next-auth/client';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const ProfilePage = () => {
  const [session, loading] = useSession();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !session) {
      router.push('/auth/signin');
    }
  }, [loading, session, router]);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (!session) {
    return null;
  }

  return <div>This a protected page</div>;
};

export default ProfilePage;

Если пользователь попытается получить доступ к странице профиля без входа в систему, он будет перенаправлен на страницу входа в систему. После входа в систему он сможет просмотреть содержимое страницы профиля.

Конфигурации и кастомизация

Auth.js предлагает различные настраиваемые параметры конфигурации в соответствии с вашими потребностями в аутентификации. К ним относятся:

• Провайдеры — вы можете добавить любое количество провайдеров, таких как Google, GitHub, Facebook и т. д., в свою конфигурацию NextAuth, которая затем станет доступна пользователю для входа в систему.
• Обратные вызовы — позволяют вам определить, как должна выполняться аутентификация после успешной аутентификации пользователя.
• Страницы — вы можете определить пользовательскую страницу, которую хотите использовать для входа, выхода и отображения сообщений об ошибках, связанных с аутентификацией.
• Управление сеансом — настройка поведения сеанса. JWT и срок действия сеанса можно изменить в соответствии с вашими потребностями.

Теперь давайте рассмотрим пример того, как вы можете настроить свою конфигурацию NextAuth для использования нескольких поставщиков аутентификации, обратных вызовов и пользовательских страниц.

Обновите свой файл pages/api/auth/[...nextauth].js с помощью этого кода:

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  callbacks: {
    async signIn(user, account, profile) {
      return true;
    },
    async redirect(url, baseUrl) {
      return baseUrl;
    },
    async session(session, token) {
      session.user.id = token.id;
      return session;
    },
    async jwt(token, user, account, profile, isNewUser) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
  },
  pages: {
    signIn: '/auth/signin',
    signOut: '/auth/signout',
    error: '/auth/error',
  },
});

Затем обновите свой файл .env.local, чтобы добавить свой Google ID и секретный ключ Google:

GOOGLE_ID=your-google-client-id 
GOOGLE_SECRET=your-ggoogle-client-secret

Кроме того, создание pages/auth/signout.js и страницы pages/auth/error.js . Добавьте этот код в pages/auth/signout.js файл:

import { useEffect } from 'react';
import { signOut } from 'next-auth/client';
import { useRouter } from 'next/router';

const SignOut = () => {
  const router = useRouter();

  useEffect(() => {
    // Sign out the user and redirect to the homepage
    signOut({ redirect: false }).then(() => router.push('/'));
  }, [router]);

  return (
    <div>
      <h1>Signing you out...</h1>
      <p>Please wait.</p>
    </div>
  );
};

export default SignOut;

Затем добавьте этот код к pages/auth/error.js файл:

import { useRouter } from 'next/router';

const Error = () => {
  const router = useRouter();
  const { error } = router.query;

  return (
    <div>
      <h1>Error</h1>
      <p>Sorry, an error occurred: {error}</p>
      <button onClick={() => router.push('/')}>Go back to Home</button>
    </div>
  );
};

export default Error;

Несмотря на то, что Auth.js предоставляет все эти возможности настройки, помните, что он не идеален — ни один инструмент не идеален. Если вы готовы решать сложные задачи, добавляя расширенные настройки, многофакторную аутентификацию или интеграцию с пользовательскими серверными системами, он может стать мощным средством аутентификации для вашего проекта.

Варианты использования для Auth.js

Auth.js предоставляет простой способ проверки подлинности в любом веб-приложении, но важно понимать, является ли Auth.js это подходящий инструмент для вашего конкретного проекта. Это особенно полезно, если:

• Ты начинаешь новую жизнь. Next.js веб-приложение. С тех пор, как Auth.js изначально разработанный для приложений Next, он может предоставить вам надежную базу для обработки аутентификации "из коробки" Скорее всего, со временем ваша база пользователей будет расти, и вашему приложению потребуется масштабируемое решение для проверки подлинности, способное справиться с растущей сложностью Вам понадобится один из нескольких готовых методов аутентификации, таких как вход по электронной почте / паролю и OAuth-провайдеры, такие как Google или GitHub, что сэкономит время на разработку

Однако Auth.js это может оказаться неподходящим решением для вас, если:

• Приложение требует от вас, чтобы настроить проверку подлинности потоков Проект построен на старой технологии или рамки, за пределами Next.js, Экспресс, SvelteKit, и QUIK. В таком случае, Auth.js может быть, вам было очень трудно реализовать

Auth.js по сравнению с аутентификацией Passport.js, OAuth и Firebase

Passport, OAuth и Firebase Authentication — это некоторые из самых первых библиотек и фреймворков аутентификации, которые до сих пор широко используются для реализации аутентификации в веб-приложениях.

Auth.js обеспечивает большую совместимость с Next.js, в то время как Passport.js является одной из наиболее используемых и универсальных библиотек аутентификации в экосистеме Node.js. Между тем, аутентификация Firebase используется везде — не только в приложениях Node.js, но и на любой другой платформе.

Теперь давайте сравним эти библиотеки:

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

Конечно, есть множество других вариантов, которые стоит рассмотреть, но это хорошее место для начала!

Вывод

Auth.js обеспечивает более надежную и гибкую аутентификацию пользователей в любом приложении JavaScript. Он поддерживает множество поставщиков аутентификации, управляет сеансами пользователей и даже позволяет использовать пользовательские обратные вызовы, что делает его идеальным решением для нового или существующего проекта.