Skip to content

Commit bfa8717

Browse files
ivan-vazquezivan-vazquez
committed
Add refresh token example
1 parent c93a683 commit bfa8717

File tree

2 files changed

+208
-0
lines changed

2 files changed

+208
-0
lines changed

‎EXAMPLES.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
- [Passwordless Login](#passwordless-login)
44
- [Organizations](#organizations)
55
- [WebAuth.client.login(options, callback)](#webauthclientloginoptions-callback)
6+
- [Get and use a Refresh token](#get-and-use-a-refresh-token)
67

78
## Passwordless Login
89

@@ -132,3 +133,52 @@ auth0.client.login(
132133
}
133134
);
134135
```
136+
137+
## Get and use a Refresh token
138+
139+
How to obtain and generate a refresh_token to use it for getting new access_tokens.
140+
141+
To do this, set `responseType` to `code` when creating the `WebAuth` client:
142+
```js
143+
var webAuth = new auth0.WebAuth({
144+
domain: '{YOUR_AUTH0_DOMAIN}',
145+
redirectUri: '{YOUR_REDIRECT_URI}',
146+
clientID: '{YOUR_CLIENT_ID}',
147+
responseType: 'code',
148+
});
149+
```
150+
151+
Call `authorize`, add `offline_access` as part of the `scope`:
152+
```js
153+
webAuth.authorize({
154+
audience: '{THE_AUDIENCE}',
155+
scope: 'offline_access'
156+
});
157+
```
158+
159+
`code` can be obtained as a string param in the callback
160+
161+
Exchange the obtained `code` to get an `access_token` and the `refresh_token`:
162+
```js
163+
webAuth.client.oauthToken(
164+
{
165+
code,
166+
grantType: 'authorization_code',
167+
redirectUri: '{YOUR_REDIRECT_URI}',
168+
}, function(err, result) {
169+
if (!err) {
170+
// result.refreshToken
171+
}
172+
}
173+
);
174+
```
175+
176+
Use the `refresh_token` to generate `access_token`
177+
```js
178+
webAuth.client.oauthToken(
179+
{
180+
grantType: 'refresh_token',
181+
clientID: '{YOUR_CLIENT_ID}',
182+
refresh_token: '{THE_REFRESH_TOKEN}',
183+
}
184+
```

‎example/refresh_token.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Auth0.js Demo Examples</title>
5+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
6+
<script src="//cdn.auth0.com/js/auth0/development/auth0.min.js"></script>
7+
</head>
8+
<body class="container">
9+
10+
<h1>How to get and use a Refresh Token</h1>
11+
<div>
12+
<p>1. Get code for exchange</p>
13+
<input
14+
type="button"
15+
class="code-exchange-button"
16+
value="Generate code"
17+
/>
18+
<label for="code-exchange">Code:</label>
19+
<input id="code-exchange" type="text" value="" />
20+
</div>
21+
22+
23+
<div>
24+
<p>2. Get new tokens using the code</p>
25+
<input
26+
type="button"
27+
class="get-token-using-code-button"
28+
value="Get"
29+
/>
30+
<pre id="code-exchange-result"></pre>
31+
</div>
32+
33+
34+
<div>
35+
<p>3. Get new tokens using the Refresh Token</p>
36+
<label for="refresh-token">Refresh token:</label>
37+
<input id="refresh-token" type="text" value="" />
38+
39+
<input
40+
type="button"
41+
class="get-new-token-button"
42+
value="Get Tokens"
43+
/>
44+
<p>New tokens:</p>
45+
<pre id="refresh-token-result"></pre>
46+
</div>
47+
48+
<input type="button" class="logout-button" value="logout" />
49+
50+
<input type="button" class="reset-button" value="reset" />
51+
52+
<pre id="err"></pre>
53+
54+
<script type="text/javascript">
55+
const config = {
56+
audience: '{YOUR_AUDIENCE}',
57+
domain: '{YOUR_AUTH0_DOMAIN}',
58+
clientID: '{YOUR_AUTH0_CLIENT_ID}',
59+
redirectUri: '{YOUR_REDIRECT_URI}',
60+
}
61+
62+
var webAuth = new auth0.WebAuth({
63+
domain: config.domain,
64+
redirectUri: config.redirectUri,
65+
clientID: config.clientID,
66+
responseType: 'code',
67+
});
68+
69+
$('.code-exchange-button').click(function(e) {
70+
e.preventDefault();
71+
72+
webAuth.authorize({
73+
audience: config.audience,
74+
scope: 'offline_access'
75+
});
76+
});
77+
78+
$('.get-token-using-code-button').click(function(e) {
79+
e.preventDefault();
80+
const code = $('#code-exchange').val();
81+
if (code !== '') {
82+
webAuth.client.oauthToken(
83+
{
84+
code,
85+
grantType: 'authorization_code',
86+
redirectUri: config.redirectUri,
87+
},
88+
function(err, data) {
89+
let result = null;
90+
if (err) {
91+
const { statusCode, code, description } = err;
92+
result = {
93+
statusCode,
94+
code,
95+
description
96+
}
97+
} else {
98+
result = data;
99+
$('#refresh-token').val(data.refreshToken);
100+
}
101+
102+
displayJson(result, '#code-exchange-result');
103+
}
104+
);
105+
}
106+
});
107+
108+
$('.get-new-token-button').click(function(e) {
109+
e.preventDefault();
110+
webAuth.client.oauthToken(
111+
{
112+
grantType: 'refresh_token',
113+
clientID: config.clientID,
114+
refresh_token: $('#refresh-token').val(),
115+
},
116+
function(err, data) {
117+
let result = null;
118+
if (err) {
119+
const { statusCode, code, description } = err;
120+
result = {
121+
statusCode,
122+
code,
123+
description
124+
}
125+
} else {
126+
result = data;
127+
}
128+
129+
displayJson(result, '#refresh-token-result');
130+
}
131+
);
132+
});
133+
134+
$('.logout-button').click(function(e) {
135+
e.preventDefault();
136+
webAuth.logout({ returnTo: config.redirectUri });
137+
});
138+
139+
$('.reset-button').click(function(e) {
140+
e.preventDefault();
141+
window.location.href = config.redirectUri;
142+
});
143+
144+
const displayJson = (json, locator) => {
145+
const jsonStr = JSON.stringify(json, null, 2);
146+
$(locator).append(jsonStr);
147+
};
148+
149+
$(document).ready(function() {
150+
var params = new URLSearchParams(window.location.search);
151+
152+
if (params.get('code')) {
153+
$('#code-exchange').val(params.get('code'));
154+
}
155+
});
156+
</script>
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)