Last active
January 19, 2022 19:13
-
-
Save douglampe/37be151ce7f710673ec5e81e912afbcc to your computer and use it in GitHub Desktop.
OATH2 Provider for React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import axios, { AxiosRequestConfig } from 'axios'; | |
import jwtDecode from 'jwt-decode'; | |
import AccessToken from '../types/AccessToken'; | |
import AuthData from '../types/AuthData'; | |
import IdToken from '../types/IdToken'; | |
const getAuthData = () : AuthData => | |
<AuthData>JSON.parse(window?.localStorage?.getItem('authData')); | |
const setAuthData = data => | |
{ | |
const idJwt = jwtDecode<IdToken>(data.id_token); | |
const accessJwt = jwtDecode<AccessToken>(data.access_token); | |
const authData = <AuthData> { | |
idToken: data.id_token, | |
accessToken: data.access_token, | |
username: accessJwt.username, | |
expiration: idJwt.exp, | |
}; | |
window.localStorage.setItem('authData', JSON.stringify(authData)); | |
} | |
const getToken = () : string => { | |
const authData = getAuthData(); | |
return authData?.idToken; | |
} | |
const getUser = () : string => { | |
const authData = getAuthData(); | |
return authData?.username; | |
} | |
const login = async () => { | |
const config = await getConfig(); | |
const loginUrl = `${config.authorization_endpoint}?client_id=${process.env.AUTH_CLIENT_ID}&response_type=code&scope=${process.env.AUTH_SCOPE}&redirect_uri=${process.env.AUTH_REDIRECT}`; | |
window.location.href = loginUrl; | |
} | |
const handleCallback = async () => { | |
const params = new URLSearchParams(window.location.search); | |
if (params.has('code')) { | |
const config = await getConfig(); | |
const data = new URLSearchParams(); | |
data.append('grant_type', 'authorization_code'); | |
data.append('client_id', process.env.AUTH_CLIENT_ID); | |
data.append('redirect_uri', process.env.AUTH_REDIRECT); | |
data.append('code', params.get('code')); | |
const options: AxiosRequestConfig = { | |
method: 'POST', | |
headers: { 'content-type': 'application/x-www-form-urlencoded' }, | |
url: config.token_endpoint, | |
data, | |
}; | |
const result = await axios(options); | |
setAuthData(result.data); | |
} | |
} | |
const isAuthenticated = () => { | |
const authData = getAuthData(); | |
if (!authData) { | |
return false; | |
} | |
return authData?.expiration > Date.now() / 1000; | |
} | |
const getConfig = async () => { | |
let config = window.localStorage.getItem('oidcConfig') as any; | |
if (!config) { | |
const result = await axios.get(`${process.env.AUTH_ISSUER}/.well-known/openid-configuration`); | |
config = result?.data; | |
window.localStorage.setItem('oidcConfig', JSON.stringify(config)); | |
} else { | |
config = JSON.parse(config); | |
} | |
return config; | |
} | |
export const logout = async () => { | |
window.localStorage.removeItem('authData'); | |
} | |
export const authService = { | |
isAuthenticated, | |
login, | |
logout, | |
handleCallback, | |
getToken, | |
getUser, | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment