Скачать useAuth - Скачать исходный код useAuth

useAuth

AI Исходный код

v2.0.0

Скачать

Useauth

Самый быстрый способ добавить аутентификацию в ваше приложение React

Начиная

useAuth разработан, чтобы быстро настроить. Вам понадобится учетная запись с Auth0 или NetLify Identity и соответствующие ключи доступа.

1. Установите крюк

 $ yarn add react-use-auth

Загрузки с NPM, добавляет в ваш пакет. JSON и т. Д. Вы также можете использовать NPM.

2. Установите клиент Auth Client

useAuth не устанавливает собственных клиентов аутентификации. Вместо этого они помечены как зависимости от сверстников.

Установите auth0-js или netlify-identity-widget в зависимости от того, что вы хотели бы использовать. Скоро наступит :)

 $ yarn add auth0-js

или

 $ yarn add netlify-identity-widget

Вы увидите предупреждения о отсутствующих зависимостях сверстников для клиента, которого вы не используете. Это нормально.

3. Настройка с AuthConfig

useAuth использует компонент <AuthConfig> для настройки вашего клиента аутентификации. Мы используем Xstate за кулисами для управления состоянием аутентификации для вас.

Убедитесь, что AuthConfig рендерирует на каждой странице.

С Гэтсби добавьте его в gatsby-browser.js . С NextJs, _app.js лучше. Вам не нужно обернуть дерево компонентов, но вы можете, если предпочитаете. Мы уверены, что Useauth не нарушает рендеринг на стороне сервера. ✌

 // gatsby-browser.js
import * as React from "react" ;
import { navigate } from "gatsby" ;

import { AuthConfig } from "react-use-auth" ;
import { Auth0 } from "react-use-auth/auth0" ;

export const wrapRootElement = ( { element } ) => (
    < >
        < AuthConfig
            navigate = { navigate }
            authProvider = { Auth0 }
            params = { {
                domain : "useauth.auth0.com" ,
                clientID : "GjWNFNOHqlino7lQNjBwEywalaYtbIzh"
            } }
        />
        { element }
    </ >
) ;

<AuthConfig> инициализирует глобальную машину штата Xstate, устанавливает клиент Auth0 и проверяет сеансы пользователя на каждой нагрузке. Теперь у вас есть легкий доступ к аутентификации во всем вашем приложении :)

Параметры конфигурации:

navigate - ваша навигационная функция, используемая для перенаправления. Протестировано с Gatsby, NextJS и React Router. Все должно работать.
authProvider - интерфейс USEAuth для вашего поставщика аутентификации.
params - параметры для вашего поставщика аутентификации

Обертки клиентов useAuth предоставляют умные дефолты.

Более подробная информация об использовании пользовательской конфигурации для каждого клиента, используемого с Auth0, и используйте с NetLify Identity. Чтобы узнать о том, как это работает, перейдите, чтобы создать поставщика авторов.

PS: Не стесняйтесь использовать мой домен Auth0 и ClientId, чтобы увидеть, подходит ли useAuth вам. Вот почему они видны в фрагменте кода?

4. Создать страницу обратного вызова

Auth0 и большинство других поставщиков аутентификации используют OAuth. Это требует перенаправления вашего пользователя в форму входа в систему. После входа в систему поставщик перенаправляет пользователей обратно в ваше приложение.

Вы можете пропустить этот шаг с NetLify Identity. Он использует всплывающее окно.

Любой способ создания страниц React должен работать, вот код, который я использую для Gatsby:

 import * as React from "react"
import { useAuth } from "react-use-auth"

const Auth0CallbackPage = ( ) => {
    const { handleAuthentication } = useAuth ( )
    React . useEffect ( ( ) => {
        handleAuthentication ( )
    } , [ handleAuthentication ] )

    return (
        < h1 >
            This is the auth callback page,
            you should be redirected immediately!
        </ h1 >
    )
}

export default Auth0CallbackPage

Цель состоит в том, чтобы загрузить страницу, кратко показать немного текста и запустить метод handleAuthentication от useAuth на загрузке страницы.

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

Убедитесь, что вы добавите <domain>/auth0_callback в качестве действительного URL -адреса обратного вызова в конфигурации Auth0.

5. Наслаждайтесь Useauth

Вы готовы использовать useAuth для аутентификации в вашем приложении React. ?

Вот кнопка входа, например:

 const Login = ( ) => {
    const { isAuthenticated , login , logout } = useAuth ( ) ;

    if ( isAuthenticated ( ) ) {
        return < Button onClick = { logout } > Logout </ Button > ;
    } else {
        return < Button onClick = { login } > Login </ Button > ;
    }
} ;

isAuthenticated - это метод, который проверяет, если файл cookie пользователя все еще действителен.

login и logout запускает их соответствующие действия.

Вы даже можете поздороваться со своими пользователями:

 // src/pages/index.js

const IndexPage = ( ) => {
  const { isAuthenticated , user } = useAuth ( )

  return (
    < Layout >
      < SEO title = "Home" />
      < h1 > Hi { isAuthenticated ( ) ? user . name : "people" } </ h1 >
  )
}

Проверьте isAuthenticated затем используйте user объект. ✌

Для более подробных документов посетите useauth.dev

Вы можете попробовать это здесь https://gatsby-useauth-example.now.sh/

Автор

? Swizec Teller [email protected]

GitHub: @swizec
Твиттер: @swizec
Блог: swizec.com/blog

? Внося

Взносы, проблемы и запросы на функции приветствуются!
Не стесняйтесь проверять страницу проблем.

Я хочу поддержать других поставщиков аутентификации. Пожалуйста, помогите :)

Покажите свою поддержку

Дайте ️, если этот проект помог вам!

Лицензия

Этот Readme был сгенерирован с ❤ readme-md-генератором

Участники

Спасибо этим замечательным людям (ключ эмодзи):

_Дежан	_{Джейсон Миллер}	_{Грэм Барбер}	_{Матеус Габи}	_{Хорхе Галат}	_{Swizec Teller} ?	_{Ник Ричмонд}
_{Олли МОНК}	_{Хенрик Венц} ?	_{Макс Чехаб}	_{Джоэл Бартлетт}	_{Сиддик Мехди}	_Джесс ?	_{Хорхе Куадра}
_{Øyvind Мартинсен}	_{Фредрик Сёгаард}	_{Артем Руденко}	_{Траверс Пинкертон}	_{Эрик Ходжес}	_{Девин Фитцсимонс}	_{Джейсон Ластер} ?
_{Патрик Арминио}