Как добавить аутентификацию GitHub в приложение Next.js

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

Это означает авторизацию передачи учетных данных от человека к машине во время взаимодействия в сети для подтверждения подлинности пользователя.

Appwrite — это сквозной внутренний сервер для веб-, мобильных, нативных или внутренних приложений, упакованных в виде набора микросервисов Docker. Мы можем использовать эти службы Appwrite для быстрой интеграции методов аутентификации и входа в наше приложение.

В этой заметке рассматривается, как аутентифицировать приложение Next.js с помощью провайдера Appwrite’s GitHub OAuth.

Полный исходный код находится в этом репозитории GitHub.

Содержание

Предварительные условия
Настройка Appwrite и GitHub
Настройка приложения Next.js
Интеграция аутентификации GitHub в приложение Next.js
Заключение
Ресурсы

Предварительные условия

Чтобы понять эту статью, вам необходимо выполнить следующие требования:

Установка Node.js
Установка Docker
Базовые знания JavaScript и React.js
Экземпляр Appwrite; ознакомьтесь с этой статьей о том, как настроить экземпляр
Учетная запись GitHub; регистрация совершенно бесплатна.

Настройка Appwrite и GitHub

Сначала мы запустим экземпляр Appwrite на нашей локальной машине и перейдем на указанные имя хоста и порт http://localhost:80. Войдите в систему или зарегистрируйтесь, чтобы создать новое приложение.

После успешной регистрации нажмите на кнопку Create Project и выберите имя для проекта.

Перейдите на вкладку настроек и сохраните ID проекта и конечную точку API. Мы будем использовать это для настройки приложения Next.js.

Далее перейдите на вкладку Пользователи в меню слева, перейдите в раздел Настройки, прокрутите вниз и установите флажок GitHub OAuth2 Provider.

Теперь возьмите URI перенаправления OAuth и добавьте аутентификацию GitHub. Войдите в GitHub, перейдите в settings/profile, прокрутите вниз и перейдите на вкладку Developer settings.

Выберите слева вкладку OAuth Apps и нажмите на кнопку New Auth App.

Далее выберите имя приложения, добавьте URL домашней страницы, вставьте URI перенаправления OAuth и нажмите зеленую кнопку Register Application.

Возьмите идентификатор клиента, нажмите на кнопку Generate a new secret, авторизуйте GitHub и скопируйте созданный секрет клиента.

Теперь переключитесь на Appwrite и вставьте ID клиента в поле App ID, а секрет клиента — в App Secret.

Настройка приложения Next.js

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

npx create-next-app appwrite-github-app

Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенная выше команда создает начальное приложение Next.js в нашей папке appwrite-github-app.

Далее перейдите в каталог проекта с помощью следующей команды:

cd appwrite-github-app

Войти в полноэкранный режим Выйти из полноэкранного режима

Выполните следующую команду для установки npm-пакетов Appwrite и запуска приложения:

npm install appwrite #install appwrite package
npm run dev #start the dev server

Войти в полноэкранный режим Выйти из полноэкранного режима

Next.js запустит сервер разработки по адресу http://localhost:3000.

Интеграция аутентификации GitHub в приложение Next.js

Сначала создайте файл utils.js в корневом каталоге со следующими фрагментами:

    import { Appwrite } from "appwrite";
    const appwriteSdk = new Appwrite();
    appwriteSdk
      .setEndpoint("http://localhost/v1")
      .setProject("<PROJECT ID HERE>");
    export default appwriteSdk;

Вход в полноэкранный режим Выйти из полноэкранного режима

Здесь мы импортировали Appwrite и создали его новый экземпляр, передав ему ID проекта и конечную точку API, которые мы сохранили ранее.

Далее измените index.js с помощью следующих фрагментов:

 //pages/index.js
    import Head from "next/head";
    import styles from "../styles/Home.module.css";
    import appwriteSDK from "../utils";
    export default function Home() {
      const authRedirect = async () => {
        try {
          await appwriteSDK.account.createOAuth2Session(
            "github",
            "http://localhost:3000/welcome",
            "http://localhost:3000"
          );
        } catch (error) {
          console.log(error);
        }
      };
      return (
        <div className={styles.container}>
          <Head>
            <title>Appwrite Authentication with Github</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <main className={styles.main}>
            <h1>Hello there!</h1>
            <button onClick={authRedirect}>Login with Github</button>
          </main>
        </div>
      );
    }

Войти в полноэкранный режим Выйти из полноэкранного режима

В приведенных выше фрагментах мы:

Импортировали appwriteSDK из файла utils.js, создали функцию authRedirect() и предоставили URL успешной и неудачной авторизации внутри функции authRedirect().
Вернули кнопку Login with GitHub и передали ей функцию authRedirect().

Обратите внимание, что мы указали маршрут /welcome, который мы еще не создали; создайте файл welcome.js в папке pages со следующими фрагментами:

    //pages/welcome.js
    import styles from "../styles/Home.module.css";
    import "bootstrap/dist/css/bootstrap.min.css";
    import { useEffect, useState } from "react";
    import { useRouter } from "next/router";
    import appwriteSDK from "../utils";
    function welcome() {
      const [user, setUser] = useState(null);
      const router = useRouter();
      const getUser = async () => {
        const userData = (await appwriteSDK) && appwriteSDK.account.get();
        userData
          .then((res) => setUser(res))
          .catch((err) => {
            router.push("/");
            console.log(err);
          });
      };
      const logOut = async () => {
        await appwriteSDK.account.deleteSession("current");
        alert("logout successful");
        router.push("/");
      };
      useEffect(() => {
        getUser();
      }, []);
      return (
        <div className={styles.container}>
          <main className={styles.main}>
            <h1 className="mb-4">Github Authenticated Page</h1>
            {user && (
              <div>
                <p>
                  User:{" "}
                  <span className="fs-3 fw-bold text-capitalize">{user.name}</span>
                </p>
                <p>
                  Email: <span className="fs-3 fw-normal">{user.email}</span>
                </p>
                <button onClick={logOut} className="btn-danger mt-2 fs-3">
                  Log Out
                </button>
              </div>
            )}
          </main>
        </div>
      );
    }
    export default welcome;

Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенных выше фрагментах мы:

Импортировали хуки useState, useEffect и useRouter; создали константы пользователя и маршрутизатора с useState и useRouter, соответственно.
Создали функцию getUser(); внутри нее мы получаем данные авторизованного аккаунта пользователя и обновляем состояние пользователя.
Создали функцию logOut(), которая выводит пользователя из системы.
Условно возвращаем данные пользователя и создаем кнопку Log Out в функции return().

В браузере приложение будет выглядеть следующим образом:

Когда мы нажмем на кнопку Login with GitHub, мы будем перенаправлены на страницу авторизации.

Appwrite перенаправит нас на маршрут /welcome при успешной авторизации, и там мы отобразим данные аутентифицированного пользователя.

Заключение

В этой статье мы рассмотрели добавление аутентификации в приложение Next.js с помощью провайдера Appwrite OAuth2 GitHub.

Ресурсы

Эти ресурсы могут быть полезны:

Настройка локального экземпляра Appwrite
Начало работы с Appwrite
Создание приложения GitHub OAuth