Skip to content

Commit 65991b8

Browse files
bojeil-googlebojeil-google
authored
Merge pull request #205 from firebase/Passwordless
Added new Passwordless/Email link auth QuickStart sample.
2 parents 9adaec3 + f987372 commit 65991b8

File tree

5 files changed

+247
-6
lines changed

5 files changed

+247
-6
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ Samples available:
66
- [Auth](auth/README.md)
77
- Anonymous Auth
88
- Custom Auth
9+
- Email and Password auth
10+
- Email Link auth
911
- Phone Auth using a visible ReCaptcha
1012
- Phone Auth using an invisible ReCaptcha
1113
- Phone Auth using popup

‎auth/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ Firebase Auth Quickstarts
33

44
The Firebase auth quickstart demonstrates several methods for signing in:
55

6-
- The [Firebase email/password quickstart](email.html) demonstrates using a Firebase stored email & password - you can both create and sign in a user.
6+
- The [Firebase email and password authentication quickstart](email-password.html) demonstrates using a Firebase stored email & password to authenticate - you can both create and sign in a user.
7+
- The [Firebase email link authentication quickstart](email-link.html) demonstrates using an email address to sign-in without a password, via a link sent through email - you can both create and sign in a user.
78
- The Firebase phone number authentication quickstart demonstrates using Firebase phone number authentication using three different techniques: with a [visible ReCaptcha](phone.html), an [invisible ReCaptcha](phone-invisible.html) and a [simplified popup flow](phone-simple.html) (not recommended for production apps).
89
- The Firebase Google Sign in quickstarts demonstrate using a Google account to authenticate to Firebase using three different techniques: with a [popup](google-popup.html), a [redirect](google-redirect.html) and an [auth token](google-credentials.html).
910
- The Firebase Facebook Login quickstarts demonstrate using a Facebook account to authenticate to Firebase using three different techniques: with a [popup](facebook-popup.html), a [redirect](facebook-redirect.html) and an [auth token](facebook-credentials.html).

‎auth/email-link.html‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright (c) 2016 Google Inc.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
<html>
18+
<head>
19+
<meta charset=utf-8 />
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21+
<title>Email Link Authentication Example</title>
22+
23+
<!-- Material Design Theming -->
24+
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
25+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
26+
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
27+
28+
<link rel="stylesheet" href="main.css">
29+
30+
<!-- Import and configure the Firebase SDK -->
31+
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
32+
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
33+
<script src="/__/firebase/4.12.0/firebase-app.js"></script>
34+
<script src="/__/firebase/4.12.0/firebase-auth.js"></script>
35+
<script src="/__/firebase/init.js"></script>
36+
37+
<script type="text/javascript">
38+
39+
/**
40+
* Handles the sign in button press.
41+
*/
42+
function toggleSignIn() {
43+
// Disable the sign-in button during async sign-in tasks.
44+
document.getElementById('quickstart-sign-in').disabled = true;
45+
46+
if (firebase.auth().currentUser) {
47+
// [START signout]
48+
firebase.auth().signOut().catch(function(error) {
49+
// Handle Errors here.
50+
var errorCode = error.code;
51+
var errorMessage = error.message;
52+
// [START_EXCLUDE]
53+
handleError(error);
54+
// [END_EXCLUDE]
55+
});
56+
// [END signout]
57+
} else {
58+
var email = document.getElementById('email').value;
59+
// Sending email with sign-in link.
60+
// [START authwithemail]
61+
var actionCodeSettings = {
62+
// URL you want to redirect back to. The domain (www.example.com) for this URL
63+
// must be whitelisted in the Firebase Console.
64+
'url': window.location.href, // Here we redirect back to this same page.
65+
'handleCodeInApp': true // This must be true.
66+
};
67+
68+
firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings).then(function() {
69+
// Save the email locally so you don’t need to ask the user for it again if they open
70+
// the link on the same device.
71+
window.localStorage.setItem('emailForSignIn', email);
72+
// The link was successfully sent. Inform the user.
73+
alert('An email was sent to ' + email + '. Please use the link in the email to sign-in.');
74+
// [START_EXCLUDE]
75+
// Re-enable the sign-in button.
76+
document.getElementById('quickstart-sign-in').disabled = false;
77+
// [END_EXCLUDE]
78+
}).catch(function(error) {
79+
// Handle Errors here.
80+
var errorCode = error.code;
81+
var errorMessage = error.message;
82+
// [START_EXCLUDE]
83+
handleError(error);
84+
// [END_EXCLUDE]
85+
});
86+
// [END authwithemail]
87+
}
88+
}
89+
90+
/**
91+
* Handles Errors from various Promises..
92+
*/
93+
function handleError(error) {
94+
// Display Error.
95+
alert('Error: ' + error.message);
96+
console.log(error);
97+
// Re-enable the sign-in button.
98+
document.getElementById('quickstart-sign-in').disabled = false;
99+
}
100+
101+
/**
102+
* Handles automatically signing-in the app if we clicked on the sign-in link in the email.
103+
*/
104+
function handleSignIn() {
105+
// [START handlesignin]
106+
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
107+
// [START_EXCLUDE]
108+
// Disable the sign-in button during async sign-in tasks.
109+
document.getElementById('quickstart-sign-in').disabled = true;
110+
// [END_EXCLUDE]
111+
112+
// You can also get the other parameters passed in the query string such as state=STATE.
113+
// Get the email if available.
114+
var email = window.localStorage.getItem('emailForSignIn');
115+
if (!email) {
116+
// User opened the link on a different device. To prevent session fixation attacks, ask the
117+
// user to provide the associated email again. For example:
118+
email = window.prompt('Please provide the email you\'d like to sign-in with for confirmation.');
119+
}
120+
if (email) {
121+
// The client SDK will parse the code from the link for you.
122+
firebase.auth().signInWithEmailLink(email, window.location.href).then(function(result) {
123+
// Clear the URL to remove the sign-in link parameters.
124+
if (history && history.replaceState) {
125+
window.history.replaceState({}, document.title, window.location.href.split('?')[0]);
126+
}
127+
// Clear email from storage.
128+
window.localStorage.removeItem('emailForSignIn');
129+
// Signed-in user's information.
130+
var user = result.user;
131+
var isNewUser = result.additionalUserInfo.isNewUser;
132+
console.log(result)
133+
}).catch(function(error) {
134+
// Handle Errors here.
135+
var errorCode = error.code;
136+
var errorMessage = error.message;
137+
// [START_EXCLUDE]
138+
handleError(error);
139+
// [END_EXCLUDE]
140+
});
141+
}
142+
}
143+
// [END handlesignin]
144+
}
145+
146+
/**
147+
* initApp handles setting up UI event listeners and registering Firebase auth listeners:
148+
* - firebase.auth().onAuthStateChanged: This listener is called when the user is signed in or
149+
* out, and that is where we update the UI.
150+
*/
151+
function initApp() {
152+
// Restore the previously used value of the email.
153+
var email = window.localStorage.getItem('emailForSignIn');
154+
document.getElementById('email').value = email;
155+
156+
// Automatically signs the user-in using the link.
157+
handleSignIn();
158+
159+
// Listening for auth state changes.
160+
// [START authstatelistener]
161+
firebase.auth().onAuthStateChanged(function(user) {
162+
if (user) {
163+
// User is signed in.
164+
var displayName = user.displayName;
165+
var email = user.email;
166+
var emailVerified = user.emailVerified;
167+
var photoURL = user.photoURL;
168+
var isAnonymous = user.isAnonymous;
169+
var uid = user.uid;
170+
var providerData = user.providerData;
171+
// Update UI.
172+
// [START_EXCLUDE]
173+
document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
174+
document.getElementById('quickstart-sign-in').textContent = 'Sign out';
175+
document.getElementById('quickstart-account-details').textContent = JSON.stringify(user, null, ' ');
176+
// [END_EXCLUDE]
177+
} else {
178+
// User is signed out.
179+
// Update UI.
180+
// [START_EXCLUDE]
181+
document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
182+
document.getElementById('quickstart-sign-in').textContent = 'Sign In without password';
183+
document.getElementById('quickstart-account-details').textContent = 'null';
184+
// [END_EXCLUDE]
185+
}
186+
// [START_EXCLUDE silent]
187+
document.getElementById('quickstart-sign-in').disabled = false;
188+
// [END_EXCLUDE]
189+
});
190+
// [END authstatelistener]
191+
192+
document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false);
193+
}
194+
195+
window.onload = initApp;
196+
</script>
197+
</head>
198+
<body>
199+
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
200+
201+
<!-- Header section containing title -->
202+
<header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
203+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
204+
<div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
205+
<a href="/"><h3>Firebase Authentication</h3></a>
206+
</div>
207+
</div>
208+
</header>
209+
210+
<main class="mdl-layout__content mdl-color--grey-100">
211+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
212+
213+
<!-- Container for the demo -->
214+
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
215+
<div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
216+
<h2 class="mdl-card__title-text">Firebase Email Link Authentication</h2>
217+
</div>
218+
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
219+
<p>Enter your email below and sign in to your account through a link sent to you via email. This will automatically create an account if you do not have one already.</p>
220+
<form onsubmit="return false">
221+
<input class="mdl-textfield__input" style="display:inline;width:auto;" type="text" id="email" name="email" placeholder="Email"/>
222+
&nbsp;&nbsp;&nbsp;
223+
<button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in" name="signin">Sign In without password</button>
224+
</form>
225+
226+
<!-- Container where we'll display the user details -->
227+
<div class="quickstart-user-details-container">
228+
Firebase sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
229+
<div>Firebase auth <code>currentUser</code> object value:</div>
230+
<pre><code id="quickstart-account-details">null</code></pre>
231+
</div>
232+
</div>
233+
</div>
234+
235+
</div>
236+
</main>
237+
</div>
238+
</body>
239+
</html>

‎auth/email.html‎ renamed to ‎auth/email-password.html‎

File renamed without changes.

‎auth/index.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,14 @@ <h2 class="mdl-card__title-text">Table of Content</h2>
4949
</div>
5050
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
5151
<p>
52-
There are multiple methods available for authentication with Firebase. Ensure that
53-
you have added configuration to each file, and that the appropriate method has been
54-
enabled in the Firebase Console authentication panel. Note: custom auth does not require
55-
enabling.
52+
There are multiple methods available for authentication with Firebase. Ensure that the appropriate sign-in method has been
53+
enabled in the Firebase Console authentication panel. Note: custom auth does not require enabling.
5654
</p>
5755

5856
<ul>
5957
<li><a href="anon.html">Anonymous</a></li>
60-
<li><a href="email.html">Email/Password</a></li>
58+
<li><a href="email-password.html">Email and Password authentication</a></li>
59+
<li><a href="email-link.html">Email Link authentication</a></li>
6160
<li><a href="customauth.html">Custom Authentication</a> and an Example <a href="exampletokengenerator/auth.html">Custom Token Generator</a><br><br></li>
6261

6362
<li><a href="phone-visible.html">Phone number sign-in with visible ReCaptcha</a></li>

0 commit comments

Comments
 (0)