Auth0 in React

در واقع auth0 یک پکیج می باشد ک توسط آن می توان لاگین و رجیستر سایت خودمان را به راحتی بسازیم و برای نصب باید از کد زیر استفاده کنیم:

yarn add @auth0/auth0-react

برای شروع باید ابتدا وارد سایت آن شویم و در آنجا ثبت نام کنیم
سپس به تب Applications می رویم و روی Applications کلیک میکنیم
در صفحه باز شده، روی دکمه Create Application کلیک می کنیم و app و تکنولوژی ک در آن به کار می بریم را انتخاب میکنیم و یک اسم برای آن تعیین می کنیم.
حال در 3 بخش Allowed Logout URLs, Allowed Callback URLs و Allowed Web Origins آدرس وب سایتمان را می دهیم یا اگر روی سیستم خودمان است، آدرس localhost:3000 را می دهیم.
حال باید در کد هایمان از domain, client id و client secret استفاده کنیم

import ReactDOM from 'react-dom';
import App from './App';
import {Auth0Provider} from "@auth0/auth0-react";

ReactDOM.render(
    <React.StrictMode>
        <Auth0Provider domain="dev-d2-wrnlur3x.auth0.com" clientId="OOr3OAhHOog1XcqpX6tdwrqOM6hwkefcvxczvhosdf" redirectUri={window.location.origin}>
            <App/>
        </Auth0Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

حال می توان از قابلیت ها auth0 در کد هایمان استفاده کنیم:

import {useAuth0} from "@auth0/auth0-react";

function App() {

    const {loginWithPopup, loginWithRedirect, logout, user, isAuthenticated} = useAuth0();

    return (
        <div className="App">
            <ul>
                <li>
                    <button onClick={loginWithPopup}>Login with Popup</button>
                </li>
                <li>
                    <button onClick={loginWithRedirect}>Login with Redirect</button>
                </li>
                <li>
                    <button onClick={logout}>Logout</button>
                </li>
            </ul>
            <h3>User is {isAuthenticated ? "Logged in" : "Not logged in"}</h3>
            {isAuthenticated && (
                <pre style={{textAlign: "start"}}>{JSON.stringify(user, null, 2)}</pre>
            )}
        </div>
    );}

loginWithPopup: در واقع توسط این تابع می توان یک پنجره باز کرد ک کاربر در همان صفحه لاگین یا رجیستر کند.

loginWithRedirect: کاربر را به یک صفحه دیگر انتقال میدهد و بعد لاگین کاربر را به صفحه مورد نظر انتقال می دهد.

logout: کاربر را لاگ اوت می کند.

user: کل اطلاعات کاربر را برای ما بر می گرداند.

isAuthenticated: فقط لاگین شدن یا نشدن کاربر را به ما می گوید.