0.0.9 • Published 2 years ago
lib-oauth v0.0.9
lib-oauth
OAuth react lib
Install
npm install --save lib-oauth
Usage
import React, { Component } from 'react'
import MyComponent from 'lib-oauth'
import 'lib-oauth/dist/index.css'
class Example extends Component {
render() {
return <MyComponent />
}
}
License
MIT © dekmabot@gmail.com
Lib to authenticate person through outer OAuth2 server
Allows: 1. add login/logout button in one string 2. add oauth/callback routes in one string 3. ProtectedRoute for app routes 4. exports userObject with login/email and token
Install
- Add package
npm i lib-oauth
- Register on some OAuth2.0 provider with
//auth/callback
callback url, then add environment variables to your.env
file
REACT_APP_OAUTH_CLIENT_ID= // ◀ OAuth provider clientId
REACT_APP_OAUTH_CLIENT_SECRET= // ◀ OAuth provider Secret
REACT_APP_OAUTH_ENDPOINT=http://localhost:8001 // ◀ OAuth provider endpoint
REACT_APP_OAUTH_REDIRECT_URL=http://localhost:8000/auth/callback // ◀ Your app callback url
- Import needed elements to your React app
import {LoginLogoutLink, OAuthRoutes, ProtectedRoute, userObject} from "lib-oauth"
- Init user object with current localStorage object or
null
if empty
const [user, setUser] = React.useState(userObject());
const handleLogin = (user) => {
console.log('login')
setUser(user)
}
const handleLogout = () => {
console.log('logout')
setUser(null)
}
- Add Login/Logout button to menu
<LoginLogoutLink login="Войти" logout="Выйти" user={user} handleLogout={handleLogout}/>
- Add oauth routes handler to your add routes list
<Routes>
<Route path="" element={<Home/>}/>
<Route path="about" element={<About/>}/>
{OAuthRoutes('/dashboard', handleLogin)} // ◀ Add code here
</Routes>
- Use
ProtectedRoute
to authorize user before go somewhere
<Routes>
<Route path="" element={<Home/>}/>
<Route path="about" element={<About/>}/>
<Route element={<ProtectedRoute user={user}/>}>
<Route path="dashboard" element={<Dashboard/>}/> // ◀ Add code here
</Route>
{OAuthRoutes('/dashboard', handleLogin)}
</Routes>