Auth0 React 示例项目教程

37 0 0

Auth0 React 示例项目教程

auth0-react-samplesAuth0 Integration Samples for React Applications项目地址:https://gitcode.com/gh_mirrors/au/auth0-react-samples

项目介绍

Auth0 React 示例项目是一个开源项目，旨在帮助开发者快速集成 Auth0 身份验证服务到 React 应用程序中。该项目提供了多个示例代码，展示了如何在 React 应用中实现用户登录、注销和注册等功能。通过使用 Auth0 React SDK，开发者可以轻松地为他们的应用添加多源身份验证，支持包括 Google、Facebook、GitHub 等在内的多种社交身份提供者。

项目快速启动

克隆项目仓库

首先，克隆 Auth0 React 示例项目的仓库到本地：

git clone https://github.com/auth0-samples/auth0-react-samples.git

安装依赖

进入项目目录并安装所需的依赖：

cd auth0-react-samples npm install

配置 Auth0

在 Auth0 管理控制台中创建一个新应用，并获取 domain 和 clientId。然后在项目中配置这些值：

// src/auth_config.json { "domain": "your-auth0-domain.auth0.com", "clientId": "your-auth0-client-id" }

启动应用

最后，启动开发服务器：

npm start

应用案例和最佳实践

保护路由

使用 React Router 和 Auth0 保护特定路由，确保只有经过身份验证的用户才能访问：


// src/components/PrivateRoute.js
import React from 'react';
import { Route } from 'react-router-dom';
import { withAuthenticationRequired } from '@auth0/auth0-react';
 
const PrivateRoute = ({ component, ...args }) => (
  <Route
    component={withAuthenticationRequired(component, {
      onRedirecting: () => <div>Loading...</div>,
    })}
    {...args}
  />
);
 
export default PrivateRoute;

用户登录和注销

在应用中实现用户登录和注销功能：


// src/components/NavBar.js
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
 
const NavBar = () => {
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
 
  return (
    <nav>
      {isAuthenticated ? (
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log Out
        </button>
      ) : (
        <button onClick={loginWithRedirect}>Log In</button>
      )}
    </nav>
  );
};
 
export default NavBar;