-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (108 loc) · 3.53 KB
/
index.html
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!-- index.html -->
<!DOCTYPE html <html lang="en">
<head>
<meta charset="UTF-8">
<title>JWT with Refresh Token</title>
<link rel="icon" href="data:,">
</head>
<body>
<h1>JWT Authentication With Refresh Token as HTTP-only Cookie using NodeJS</h1>
<div>
<h2>Register</h2>
<input id="reg-username" placeholder="Username" />
<input id="reg-password" type="password" placeholder="Password" />
<button onclick="register()">Register</button>
</div>
<div>
<h2>Login</h2>
<input id="login-username" placeholder="Username" />
<input id="login-password" type="password" placeholder="Password" />
<button onclick="login()">Login</button>
</div>
<div id="protected-content">
<h2>Protected Route</h2>
<button onclick="getProtectedContent()">Access</button>
</div>
<div id="logout">
<h2>Logout</h2>
<button onclick="logout()">Logout</button>
</div>
<script>
async function register() {
const username = document.getElementById("reg-username").value;
const password = document.getElementById("reg-password").value;
await fetch('http://localhost:3000/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
alert('Registered successfully!');
}
async function login() {
const username = document.getElementById("login-username").value;
const password = document.getElementById("login-password").value;
const response = await fetch('http://localhost:3000/#', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
credentials: 'include',
});
if (response.ok) {
alert('Logged in successfully!');
} else {
alert('Login failed');
}
}
async function getProtectedContent() {
const response = await fetch('http://localhost:3000/protected', {
credentials: 'include', // Include cookies in the request
});
if (response.status === 403) {
console.log('Access token expired, refreshing...');
await refreshAccessToken();
getProtectedContent();
} else if (response.status === 401) {
alert('Refresh token is required');
}
else if (response.ok) {
const text = await response.text();
alert(text);
} else {
alert('Failed to access protected content');
}
}
async function logout() {
const response = await fetch('http://localhost:3000/logout', {
method: 'POST',
credentials: 'include', // Include cookies in the request
});
if (response.status === 403) {
console.log('Access token expired, refreshing...');
await refreshAccessToken();
logout();
} else if (response.status === 401) {
alert('Refresh token is required');
}
else if (response.ok) {
const text = await response.text();
alert(text);
} else {
alert('Failed to logout');
}
}
async function refreshAccessToken() {
const response = await fetch('http://localhost:3000/token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({}),
credentials: 'include', // Include cookies in the request
});
if (response.ok) {
alert('Access token refreshed successfully');
} else {
alert('Failed to refresh access token');
}
}
</script>
</body>
</html>