Skip to content

Commit 9bc8fb5

Browse files
sebj54sebj54
committed
Add a Firebase JWT example
1 parent 8bda3e2 commit 9bc8fb5

File tree

2 files changed

+165
-0
lines changed

2 files changed

+165
-0
lines changed

‎examples/clients/firebase/vanilla-success.html

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Success</title>
9+
10+
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
11+
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-auth.js"></script>
12+
13+
<script>
14+
// Your web app's Firebase configuration
15+
var firebaseConfig = {
16+
apiKey: "",
17+
authDomain: "",
18+
databaseURL: "",
19+
projectId: "",
20+
storageBucket: "",
21+
messagingSenderId: "",
22+
appId: ""
23+
};
24+
// Initialize Firebase
25+
firebase.initializeApp(firebaseConfig);
26+
</script>
27+
28+
<script>
29+
var url = '/api.php/records/posts?join=categories&join=tags&join=comments&filter=id,eq,1';
30+
31+
function requestAPI(accessToken) {
32+
var req = new XMLHttpRequest();
33+
req.onreadystatechange = function () {
34+
if (req.readyState == 4) {
35+
try {
36+
document.getElementById('output').innerHTML = JSON.stringify(JSON.parse(req.responseText),
37+
undefined, 4);
38+
} catch (error) {
39+
document.getElementById('output').innerHTML = req.responseText;
40+
}
41+
}
42+
}
43+
req.open("GET", url, true);
44+
req.setRequestHeader('X-Authorization', 'Bearer ' + accessToken);
45+
req.send();
46+
}
47+
48+
function initApp() {
49+
firebase.auth().onAuthStateChanged(function (user) {
50+
if (user) {
51+
// User is signed in.
52+
var displayName = user.displayName;
53+
var email = user.email;
54+
var emailVerified = user.emailVerified;
55+
var photoURL = user.photoURL;
56+
var uid = user.uid;
57+
var phoneNumber = user.phoneNumber;
58+
var providerData = user.providerData;
59+
user.getIdToken().then(function (accessToken) {
60+
document.getElementById('sign-in-status').textContent = 'Signed in';
61+
document.getElementById('account-details').textContent = JSON.stringify({
62+
displayName: displayName,
63+
email: email,
64+
emailVerified: emailVerified,
65+
phoneNumber: phoneNumber,
66+
photoURL: photoURL,
67+
uid: uid,
68+
accessToken: accessToken,
69+
providerData: providerData
70+
}, undefined, 4);
71+
72+
requestAPI(accessToken)
73+
});
74+
} else {
75+
// User is signed out.
76+
document.getElementById('sign-in-status').textContent = 'Signed out';
77+
document.getElementById('account-details').textContent = 'null';
78+
}
79+
}, function (error) {
80+
console.log(error);
81+
});
82+
};
83+
84+
window.addEventListener('load', initApp);
85+
</script>
86+
</head>
87+
88+
<body>
89+
<h1>Firebase Login Success (or not)</h1>
90+
91+
<div id="sign-in-status"></div>
92+
<pre id="account-details"></pre>
93+
94+
<pre id="output"></pre>
95+
</body>
96+
97+
</html>

‎examples/clients/firebase/vanilla.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>
8+
Firebase
9+
</title>
10+
11+
<!-- The core Firebase JS SDK is always required and must be listed first -->
12+
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
13+
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-auth.js"></script>
14+
15+
<script>
16+
// Your web app's Firebase configuration
17+
var firebaseConfig = {
18+
apiKey: "",
19+
authDomain: "",
20+
databaseURL: "",
21+
projectId: "",
22+
storageBucket: "",
23+
messagingSenderId: "",
24+
appId: ""
25+
};
26+
// Initialize Firebase
27+
firebase.initializeApp(firebaseConfig);
28+
</script>
29+
30+
<script src="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.js"></script>
31+
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />
32+
33+
<script type="text/javascript">
34+
// FirebaseUI config.
35+
var uiConfig = {
36+
signInSuccessUrl: './vanilla-success.html',
37+
signInOptions: [
38+
// Leave the lines as is for the providers you want to offer your users.
39+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
40+
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
41+
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
42+
firebase.auth.GithubAuthProvider.PROVIDER_ID,
43+
firebase.auth.EmailAuthProvider.PROVIDER_ID,
44+
firebase.auth.PhoneAuthProvider.PROVIDER_ID,
45+
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
46+
],
47+
// tosUrl and privacyPolicyUrl accept either url string or a callback
48+
// function.
49+
// Terms of service url/callback.
50+
tosUrl: '<your-tos-url>',
51+
// Privacy policy url/callback.
52+
privacyPolicyUrl: function() {
53+
window.location.assign('<your-privacy-policy-url>');
54+
}
55+
};
56+
57+
// Initialize the FirebaseUI Widget using Firebase.
58+
var ui = new firebaseui.auth.AuthUI(firebase.auth());
59+
// The start method will wait until the DOM is loaded.
60+
ui.start('#firebaseui-auth-container', uiConfig);
61+
</script>
62+
</head>
63+
<body>
64+
<h1>Firebase login</h1>
65+
66+
<div id="firebaseui-auth-container"></div>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)