1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import { createContext, useState, useEffect, use } from 'react';
import axios from 'axios';
// 1. Initialize Context
const AuthContext = createContext(null);
// 2. Create a Custom Provider Component
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
useEffect(() => {
// Fetch user data from your backend API
const fetchUser = async () => {
// axios is directly used from Axios library to avoid interceptor
// added in services/api.js
try {
const response = await axios.get("/bff/api/security/me", {
timeout: 30000, // 30 seconds
headers: { 'Content-Type': 'application/json' },
withCredentials: true
});
if (response.data && 'username' in response.data) {
setUser(response.data);
}
} catch (error) {
console.log(error);
}
};
fetchUser();
}, []);
const login = () => {
// Start single sign-on process (Using OAuth2, OpenID)
// Access /ui of API gateway.
// API gateway will redirect user to authorization server if the user is not logged in
// If logged in, API gateway will redirect browser to React app itself reloading the app.
window.location.href = "/bff/ui";
}
const logout = async () => {
// Logout from API gateway
try {
const response = await axios.post('/bff/logout', {
timeout: 30000, // 30 seconds
headers: { 'Content-Type': 'application/json' },
withCredentials: true
});
// Redirect browser to logout from authorization server.
window.location.href = response.headers.location;
// setUser(null) is not needed since browser is redirected.
} catch (error) {
console.log(error);
}
};
const isLoggedIn = () => {
if (user) {
return true;
}
return false;
};
const isAdmin = () => {
return isInRole("ADMIN");
}
const isInRole = (role) => {
if (user && role && user.roles) {
return user.roles.includes(role);
}
return false;
};
const isInRoles = (roles) => {
if (user && roles && user.roles) {
return roles.some(value => user.roles.includes(value));
}
return false;
}
// Provide the state and the modifier function as a value object
return (
<AuthContext value={{ user, login, logout, isLoggedIn, isAdmin, isInRole, isInRoles }}>
{children}
</AuthContext>
);
}
// 3. Create a clean Custom Hook to consume this specific context
export function useAuth() {
const context = use(AuthContext);
if (!context) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
}
|
