├── LICENSE
├── README.md
└── public
    ├── 404.html
    ├── app.js
    ├── emoji.js
    └── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Auth0 Blog Samples
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # FireTeller
 2 | FireTeller is a Firebase app that integrates Auth0 for user authentication. This app was built as a sample application for the blog post which covers how you can build serverless application with the Firebase 3.0 SDK. Check out the blog post [here](https://auth0.com/blog/2016/06/08/firebase-authentication-with-firebase-3.0-and-auth0-integration/) and a live demo of the app [here](https://project-8302152786657556368.firebaseapp.com/).
 3 | 
 4 | ![FireTeller](https://cdn.auth0.com/blog/new-firebase/fireteller-app.png)
 5 | 
 6 | ## Running the App
 7 | 
 8 | FireTeller uses the Firebase 3.0 SDK. You will need a Firebase and Auth0 account. Sign up for a free [Firebase](https://firebase.google.com) and [Auth0](https://auth0.com/signup) account before continuing.
 9 | 
10 | 1. Clone the repo
11 | 2. Install the Firebase CLI by running `npm intall firebase-tools -g` (you will need Node and NPM)
12 | 3. Navigate to the directory where you cloned the repo
13 | 4. Run `firebase init` and follow the on-screen instructions. **DO NOT OVERWRITE THE INDEX.HTML FILE**
14 | 5. Open the `app.js` file in the `public` directory and update the variables at the top with your keys
15 | 6. Run `firebase serve`
16 | 7. Navigate to `localhost:5000` to see your application
17 | 
18 | ## What is Auth0?
19 | 
20 | Auth0 helps you to:
21 | 
22 | * Add authentication with [multiple authentication sources](https://docs.auth0.com/identityproviders), either social like **Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others**, or enterprise identity systems like **Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider**.
23 | * Add authentication through more traditional **[username/password databases](https://docs.auth0.com/mysql-connection-tutorial)**.
24 | * Add support for **[linking different user accounts](https://docs.auth0.com/link-accounts)** with the same user.
25 | * Support for generating signed [Json Web Tokens](https://docs.auth0.com/jwt) to call your APIs and **flow the user identity** securely.
26 | * Analytics of how, when and where users are logging in.
27 | * Pull data from other sources and add it to the user profile, through [JavaScript rules](https://docs.auth0.com/rules).
28 | 
29 | ## Create a free Auth0 account
30 | 
31 | 1. Go to [Auth0](https://auth0.com/signup) and click Sign Up.
32 | 2. Use Google, GitHub or Microsoft Account to login.
33 | 
34 | ## Issue Reporting
35 | 
36 | If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/whitehat) details the procedure for disclosing security issues.
37 | 
38 | ## Author
39 | 
40 | [Auth0](auth0.com)
41 | 
42 | ## License
43 | 
44 | This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info.
45 | 


--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!doctype html>
 3 | <html>
 4 |   <head>
 5 |     <title>Page Not Found</title>
 6 |     <style>
 7 |       body {
 8 |         margin: 0 auto;
 9 |         padding: 1em;
10 |         font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
11 |         font-size: 1.1em;
12 |         color: #333;
13 |       }
14 |       @media screen and (min-width: 40em) {
15 |         body {
16 |           width: 40em;
17 |         }
18 |       }
19 |       h1, h2, h3 {
20 |         font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
21 |         font-weight: 300;
22 |       }
23 |       h1 {
24 |         margin: 1em 0;
25 |         padding: 0 0 0.25em 0;
26 |         border-bottom: 1px dotted #ccc;
27 |         text-align: center;
28 |         font-size: 3em;
29 |         line-height: 1.1em;
30 |       }
31 |       h2 {
32 |         margin: 1em 0 0.45em 0;
33 |         padding: 0;
34 |         font-size: 1.8em;
35 |       }
36 |       p {
37 |         margin: 0 0 0.5em 0;
38 |         line-height: 1.8em;
39 |       }
40 |       ol {
41 | 
42 |       }
43 |       ol li {
44 |         margin: 0 0 0.5em 0;
45 |         font-size: 0.9em;
46 |         line-height: 1.8em;
47 |       }
48 |       a {
49 |         color: #50B1FF;
50 |         text-decoration: none;
51 |       }
52 |       a:hover {
53 |         text-decoration: underline;
54 |       }
55 |       code {
56 |         display: inline-block;
57 |         padding: 0.1em;
58 |         background-color: #F8F8F8;
59 |         border: 1px solid #DDD;
60 |         border-radius: 3px;
61 |         font-family: Consolas,"Liberation Mono",Courier,monospace;
62 |         font-size: 0.9em;
63 |         line-height: 1;
64 |       }
65 |       .logo {
66 |         display: block;
67 |         margin: 3em 0;
68 |         text-align: center;
69 |       }
70 |     </style>
71 |   </head>
72 |   <body>
73 |     <h1>Page Not Found</h1>
74 |     <p>This specified file was not found on this website. Please check the URL for mistakes and try again.</p>
75 |     <h2>Why am I seeing this?</h2>
76 |     <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured public directory.</p>
77 |     <a class="logo" href="//www.firebase.com">
78 |       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAAAaCAYAAABRhnV8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNWM4MWUxOS0zYWJmLTQyYWYtOTVhMi01MDBiZWU5NzAyMTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkNCQkJBMDlCNkRGMTFFM0JDMTdBQTgyNEFEQURCQTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkNCQkJBMDhCNkRGMTFFM0JDMTdBQTgyNEFEQURCQTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZWFkZWM0M2YtMmFjMy00NTEyLTljNzQtYjVmMDJjMWNhNTkxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI1YzgxZTE5LTNhYmYtNDJhZi05NWEyLTUwMGJlZTk3MDIxOCIvPiA8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" />
79 |     </a>
80 |   </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/public/app.js:
--------------------------------------------------------------------------------
  1 | // CONFIG
  2 | FIREBASE_APIKEY = 'YOUR-FIREBASE-API-KEY';
  3 | FIREBASE_AUTH_DOMAIN = 'YOUR-FIREBASE-AUTH-DOMAIN';
  4 | FIREBASE_DATABASE_URL = 'YOUR-FIREBASE-DATABASE-URL';
  5 | AUTH0_CLIENT_ID = 'YOUR-AUTH0-CLIENT-ID';
  6 | AUTH0_DOMAIN = 'YOUR-AUTH0-DOMAIN';
  7 | 
  8 | var config = {
  9 |   apiKey: FIREBASE_APIKEY,
 10 |   authDomain: FIREBASE_AUTH_DOMAIN,
 11 |   databaseURL: FIREBASE_DATABASE_URL,
 12 | };
 13 | firebase.initializeApp(config);
 14 | 
 15 | firebase.database().ref('stories').on('value', function(data){
 16 |   $('#stories').empty();
 17 | 
 18 |   data.forEach(function(story){
 19 |     generateStory(story);
 20 |   })
 21 | });
 22 | 
 23 | firebase.database().ref('story').on('value', function(data){
 24 |   $('#story').empty();
 25 |   data.forEach(function(data){
 26 |     var emoji = data.val();
 27 |     $('#story').append('<i class="em em-' + emoji + '"></i>')
 28 |   })
 29 | })
 30 | 
 31 | function generateStory(story){
 32 |   var $div = $("<div><hr></div>")
 33 |   $('#stories').prepend($div);
 34 |   story.forEach(function(page){
 35 |     $($div).append('<i class="em em-' + page.val() + '"></i>');
 36 |   })
 37 | }
 38 | 
 39 | function getRandomEmoji(){
 40 |   $('#options').empty();
 41 |   for(var i = 0; i < 30; i++){
 42 |     var number = randomNum();
 43 |     $('#options').append('<i class="em em-' + emoji[number] + '" onclick="addToStory('+ number +')"></i>');
 44 |   }
 45 | }
 46 | getRandomEmoji();
 47 | 
 48 | function addToStory(number){
 49 |   var current = firebase.database().ref('story');
 50 |   current.transaction(function(data){
 51 |     if(data){
 52 |       console.log(Object.keys(data).length)
 53 |       if(Object.keys(data).length == 9){
 54 |         data.final = emoji[number];
 55 |         firebase.database().ref('stories').push(data);
 56 |         firebase.database().ref('story').remove();
 57 |       } else {
 58 |         firebase.database().ref('story').push(emoji[number]);
 59 |       }
 60 |     } else {
 61 |       firebase.database().ref('story').push(emoji[number]);
 62 |     }
 63 |   })
 64 | }
 65 | 
 66 | function randomNum(){
 67 |   return Math.floor(Math.random() * (emoji_count - 0)) + 0;
 68 | }
 69 | 
 70 | function loginWithGoogle(){
 71 |   var provider = new firebase.auth.GoogleAuthProvider();
 72 |   firebase.auth().signInWithPopup(provider).then(function(result) {
 73 |     var user = result.user;
 74 |   }).catch(function(error) {
 75 |     console.log(error);
 76 |   });
 77 | }
 78 | 
 79 | function login(){
 80 |   var lock = new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN);
 81 |   var auth0 = new Auth0({ domain : AUTH0_DOMAIN, clientID: AUTH0_CLIENT_ID });
 82 | 
 83 |   lock.show({
 84 |     }, function(err, profile, id_token) {
 85 |       localStorage.setItem('profile', JSON.stringify(profile));
 86 |       var options = {
 87 |         id_token : id_token,
 88 |         api : 'firebase',
 89 |         scope : 'openid name email displayName',
 90 |         target: AUTH0_CLIENT_ID
 91 |       };
 92 |       auth0.getDelegationToken(options, function(err, result){
 93 |         if(!err){
 94 |           firebase.auth().signInWithCustomToken(result.id_token).catch(function(error) {
 95 |             console.log(error);
 96 |           });
 97 |         }
 98 |       });
 99 |     }, function() {
100 |       // Error callback
101 |     });
102 | }
103 | 
104 | function logout(){
105 |   localStorage.removeItem('profile');
106 |   firebase.auth().signOut().then(function() {
107 |     console.log("Signout Successful")
108 |   }, function(error) {
109 |     console.log(error);
110 |   });
111 | }
112 | 
113 | 
114 | firebase.auth().onAuthStateChanged(function(user) {
115 |   if (user) {
116 |     var profile = localStorage.getItem('profile');
117 |     profile = JSON.parse(profile);
118 |     $('#logout-btn').show();
119 |     $('#signin-btn').hide();
120 |     $('#contrinbute').show();
121 |     $('#email').show().append('<span>Welcome: <strong>' + profile.email + '</strong></span>')
122 |   } else {
123 |     $('#logout-btn').hide();
124 |     $('#signin-btn').show();
125 |     $('#contrinbute').hide();
126 |     $('#email').hide().empty();
127 |   }
128 | });
129 | 


--------------------------------------------------------------------------------
/public/emoji.js:
--------------------------------------------------------------------------------
  1 | var emoji = [
  2 | "-1",
  3 | "100",
  4 | "1234",
  5 | "8ball",
  6 | "a",
  7 | "ab",
  8 | "abc",
  9 | "abcd",
 10 | "accept",
 11 | "aerial_tramway",
 12 | "airplane",
 13 | "alarm_clock",
 14 | "alien",
 15 | "ambulance",
 16 | "anchor",
 17 | "angel",
 18 | "anger",
 19 | "angry",
 20 | "anguished",
 21 | "ant",
 22 | "apple",
 23 | "aquarius",
 24 | "aries",
 25 | "arrow_backward",
 26 | "arrow_double_down",
 27 | "arrow_double_up",
 28 | "arrow_down",
 29 | "arrow_down_small",
 30 | "arrow_forward",
 31 | "arrow_heading_down",
 32 | "arrow_heading_up",
 33 | "arrow_left",
 34 | "arrow_lower_left",
 35 | "arrow_lower_right",
 36 | "arrow_right",
 37 | "arrow_right_hook",
 38 | "arrow_up",
 39 | "arrow_up_down",
 40 | "arrow_up_small",
 41 | "arrow_upper_left",
 42 | "arrow_upper_right",
 43 | "arrows_clockwise",
 44 | "arrows_counterclockwise",
 45 | "art",
 46 | "articulated_lorry",
 47 | "astonished",
 48 | "atm",
 49 | "b",
 50 | "baby",
 51 | "baby_bottle",
 52 | "baby_chick",
 53 | "baby_symbol",
 54 | "back",
 55 | "baggage_claim",
 56 | "balloon",
 57 | "ballot_box_with_check",
 58 | "bamboo",
 59 | "banana",
 60 | "bangbang",
 61 | "bank",
 62 | "bar_chart",
 63 | "barber",
 64 | "baseball",
 65 | "basketball",
 66 | "bath",
 67 | "bathtub",
 68 | "battery",
 69 | "bear",
 70 | "bee",
 71 | "beer",
 72 | "beers",
 73 | "beetle",
 74 | "beginner",
 75 | "bell",
 76 | "bento",
 77 | "bicyclist",
 78 | "bike",
 79 | "bikini",
 80 | "bird",
 81 | "birthday",
 82 | "black_circle",
 83 | "black_joker",
 84 | "black_medium_small_square",
 85 | "black_medium_square",
 86 | "black_nib",
 87 | "black_small_square",
 88 | "black_square",
 89 | "black_square_button",
 90 | "blossom",
 91 | "blowfish",
 92 | "blue_book",
 93 | "blue_car",
 94 | "blue_heart",
 95 | "blush",
 96 | "boar",
 97 | "boat",
 98 | "bomb",
 99 | "book",
100 | "bookmark",
101 | "bookmark_tabs",
102 | "books",
103 | "boom",
104 | "boot",
105 | "bouquet",
106 | "bow",
107 | "bowling",
108 | "bowtie",
109 | "boy",
110 | "bread",
111 | "bride_with_veil",
112 | "bridge_at_night",
113 | "briefcase",
114 | "broken_heart",
115 | "bug",
116 | "bulb",
117 | "bullettrain_front",
118 | "bullettrain_side",
119 | "bus",
120 | "busstop",
121 | "bust_in_silhouette",
122 | "busts_in_silhouette",
123 | "cactus",
124 | "cake",
125 | "calendar",
126 | "calling",
127 | "camel",
128 | "camera",
129 | "cancer",
130 | "candy",
131 | "capital_abcd",
132 | "capricorn",
133 | "car",
134 | "card_index",
135 | "carousel_horse",
136 | "cat",
137 | "cat2",
138 | "cd",
139 | "chart",
140 | "chart_with_downwards_trend",
141 | "chart_with_upwards_trend",
142 | "checkered_flag",
143 | "cherries",
144 | "cherry_blossom",
145 | "chestnut",
146 | "chicken",
147 | "children_crossing",
148 | "chocolate_bar",
149 | "christmas_tree",
150 | "church",
151 | "cinema",
152 | "circus_tent",
153 | "city_sunrise",
154 | "city_sunset",
155 | "cl",
156 | "clap",
157 | "clapper",
158 | "clipboard",
159 | "clock1",
160 | "clock10",
161 | "clock1030",
162 | "clock11",
163 | "clock1130",
164 | "clock12",
165 | "clock1230",
166 | "clock130",
167 | "clock2",
168 | "clock230",
169 | "clock3",
170 | "clock330",
171 | "clock4",
172 | "clock430",
173 | "clock5",
174 | "clock530",
175 | "clock6",
176 | "clock630",
177 | "clock7",
178 | "clock730",
179 | "clock8",
180 | "clock830",
181 | "clock9",
182 | "clock930",
183 | "closed_book",
184 | "closed_lock_with_key",
185 | "closed_umbrella",
186 | "cloud",
187 | "clubs",
188 | "cn",
189 | "cocktail",
190 | "coffee",
191 | "cold_sweat",
192 | "collision",
193 | "computer",
194 | "confetti_ball",
195 | "confounded",
196 | "confused",
197 | "congratulations",
198 | "construction",
199 | "construction_worker",
200 | "convenience_store",
201 | "cookie",
202 | "cool",
203 | "cop",
204 | "copyright",
205 | "corn",
206 | "couple",
207 | "couple_with_heart",
208 | "couplekiss",
209 | "cow",
210 | "cow2",
211 | "credit_card",
212 | "crocodile",
213 | "crossed_flags",
214 | "crown",
215 | "cry",
216 | "crying_cat_face",
217 | "crystal_ball",
218 | "cupid",
219 | "curly_loop",
220 | "currency_exchange",
221 | "curry",
222 | "custard",
223 | "customs",
224 | "cyclone",
225 | "dancer",
226 | "dancers",
227 | "dango",
228 | "dart",
229 | "dash",
230 | "date",
231 | "de",
232 | "deciduous_tree",
233 | "department_store",
234 | "diamond_shape_with_a_dot_inside",
235 | "diamonds",
236 | "disappointed",
237 | "disappointed_relieved",
238 | "dizzy",
239 | "dizzy_face",
240 | "do_not_litter",
241 | "dog",
242 | "dog2",
243 | "dollar",
244 | "dolls",
245 | "dolphin",
246 | "donut",
247 | "door",
248 | "doughnut",
249 | "dragon",
250 | "dragon_face",
251 | "dress",
252 | "dromedary_camel",
253 | "droplet",
254 | "dvd",
255 | "e-mail",
256 | "ear",
257 | "ear_of_rice",
258 | "earth_africa",
259 | "earth_americas",
260 | "earth_asia",
261 | "egg",
262 | "eggplant",
263 | "eight",
264 | "eight_pointed_black_star",
265 | "eight_spoked_asterisk",
266 | "electric_plug",
267 | "elephant",
268 | "email",
269 | "end",
270 | "envelope",
271 | "es",
272 | "euro",
273 | "european_castle",
274 | "european_post_office",
275 | "evergreen_tree",
276 | "exclamation",
277 | "expressionless",
278 | "eyeglasses",
279 | "eyes",
280 | "facepunch",
281 | "factory",
282 | "fallen_leaf",
283 | "family",
284 | "fast_forward",
285 | "fax",
286 | "fearful",
287 | "feelsgood",
288 | "feet",
289 | "ferris_wheel",
290 | "file_folder",
291 | "finnadie",
292 | "fire",
293 | "fire_engine",
294 | "fireworks",
295 | "first_quarter_moon",
296 | "first_quarter_moon_with_face",
297 | "fish",
298 | "fish_cake",
299 | "fishing_pole_and_fish",
300 | "fist",
301 | "five",
302 | "flags",
303 | "flashlight",
304 | "floppy_disk",
305 | "flower_playing_cards",
306 | "flushed",
307 | "foggy",
308 | "football",
309 | "fork_and_knife",
310 | "fountain",
311 | "four",
312 | "four_leaf_clover",
313 | "fr",
314 | "free",
315 | "fried_shrimp",
316 | "fries",
317 | "frog",
318 | "frowning",
319 | "fu",
320 | "fuelpump",
321 | "full_moon",
322 | "full_moon_with_face",
323 | "game_die",
324 | "gb",
325 | "gem",
326 | "gemini",
327 | "ghost",
328 | "gift",
329 | "gift_heart",
330 | "girl",
331 | "globe_with_meridians",
332 | "goat",
333 | "goberserk",
334 | "godmode",
335 | "golf",
336 | "grapes",
337 | "green_apple",
338 | "green_book",
339 | "green_heart",
340 | "grey_exclamation",
341 | "grey_question",
342 | "grimacing",
343 | "grin",
344 | "grinning",
345 | "guardsman",
346 | "guitar",
347 | "gun",
348 | "haircut",
349 | "hamburger",
350 | "hammer",
351 | "hamster",
352 | "hand",
353 | "handbag",
354 | "hankey",
355 | "hash",
356 | "hatched_chick",
357 | "hatching_chick",
358 | "headphones",
359 | "hear_no_evil",
360 | "heart",
361 | "heart_decoration",
362 | "heart_eyes",
363 | "heart_eyes_cat",
364 | "heartbeat",
365 | "heartpulse",
366 | "hearts",
367 | "heavy_check_mark",
368 | "heavy_division_sign",
369 | "heavy_dollar_sign",
370 | "heavy_exclamation_mark",
371 | "heavy_minus_sign",
372 | "heavy_multiplication_x",
373 | "heavy_plus_sign",
374 | "helicopter",
375 | "herb",
376 | "hibiscus",
377 | "high_brightness",
378 | "high_heel",
379 | "hocho",
380 | "honey_pot",
381 | "honeybee",
382 | "horse",
383 | "horse_racing",
384 | "hospital",
385 | "hotel",
386 | "hotsprings",
387 | "hourglass",
388 | "hourglass_flowing_sand",
389 | "house",
390 | "house_with_garden",
391 | "hurtrealbad",
392 | "hushed",
393 | "ice_cream",
394 | "icecream",
395 | "id",
396 | "ideograph_advantage",
397 | "imp",
398 | "inbox_tray",
399 | "incoming_envelope",
400 | "information_desk_person",
401 | "information_source",
402 | "innocent",
403 | "interrobang",
404 | "iphone",
405 | "it",
406 | "izakaya_lantern",
407 | "jack_o_lantern",
408 | "japan",
409 | "japanese_castle",
410 | "japanese_goblin",
411 | "japanese_ogre",
412 | "jeans",
413 | "joy",
414 | "joy_cat",
415 | "jp",
416 | "key",
417 | "keycap_ten",
418 | "kimono",
419 | "kiss",
420 | "kissing",
421 | "kissing_cat",
422 | "kissing_closed_eyes",
423 | "kissing_face",
424 | "kissing_heart",
425 | "kissing_smiling_eyes",
426 | "koala",
427 | "koko",
428 | "kr",
429 | "large_blue_circle",
430 | "large_blue_diamond",
431 | "large_orange_diamond",
432 | "last_quarter_moon",
433 | "last_quarter_moon_with_face",
434 | "laughing",
435 | "leaves",
436 | "ledger",
437 | "left_luggage",
438 | "left_right_arrow",
439 | "leftwards_arrow_with_hook",
440 | "lemon",
441 | "leo",
442 | "leopard",
443 | "libra",
444 | "light_rail",
445 | "link",
446 | "lips",
447 | "lipstick",
448 | "lock",
449 | "lock_with_ink_pen",
450 | "lollipop",
451 | "loop",
452 | "loudspeaker",
453 | "love_hotel",
454 | "love_letter",
455 | "low_brightness",
456 | "m",
457 | "mag",
458 | "mag_right",
459 | "mahjong",
460 | "mailbox",
461 | "mailbox_closed",
462 | "mailbox_with_mail",
463 | "mailbox_with_no_mail",
464 | "man",
465 | "man_with_gua_pi_mao",
466 | "man_with_turban",
467 | "mans_shoe",
468 | "maple_leaf",
469 | "mask",
470 | "massage",
471 | "meat_on_bone",
472 | "mega",
473 | "melon",
474 | "memo",
475 | "mens",
476 | "metal",
477 | "metro",
478 | "microphone",
479 | "microscope",
480 | "milky_way",
481 | "minibus",
482 | "minidisc",
483 | "mobile_phone_off",
484 | "money_with_wings",
485 | "moneybag",
486 | "monkey",
487 | "monkey_face",
488 | "monorail",
489 | "moon",
490 | "mortar_board",
491 | "mount_fuji",
492 | "mountain_bicyclist",
493 | "mountain_cableway",
494 | "mountain_railway",
495 | "mouse",
496 | "mouse2",
497 | "movie_camera",
498 | "moyai",
499 | "muscle",
500 | "mushroom",
501 | "musical_keyboard",
502 | "musical_note",
503 | "musical_score",
504 | "mute",
505 | "nail_care",
506 | "name_badge",
507 | "neckbeard",
508 | "necktie",
509 | "negative_squared_cross_mark",
510 | "neutral_face",
511 | "new",
512 | "new_moon",
513 | "new_moon_with_face",
514 | "newspaper",
515 | "ng",
516 | "nine",
517 | "no_bell",
518 | "no_bicycles",
519 | "no_entry",
520 | "no_entry_sign",
521 | "no_good",
522 | "no_mobile_phones",
523 | "no_mouth",
524 | "no_pedestrians",
525 | "no_smoking",
526 | "non-potable_water",
527 | "nose",
528 | "notebook",
529 | "notebook_with_decorative_cover",
530 | "notes",
531 | "nut_and_bolt",
532 | "o",
533 | "o2",
534 | "ocean",
535 | "octocat",
536 | "octopus",
537 | "oden",
538 | "office",
539 | "ok",
540 | "ok_hand",
541 | "ok_woman",
542 | "older_man",
543 | "older_woman",
544 | "on",
545 | "oncoming_automobile",
546 | "oncoming_bus",
547 | "oncoming_police_car",
548 | "oncoming_taxi",
549 | "one",
550 | "open_file_folder",
551 | "open_hands",
552 | "open_mouth",
553 | "ophiuchus",
554 | "orange_book",
555 | "outbox_tray",
556 | "ox",
557 | "package",
558 | "page_facing_up",
559 | "page_with_curl",
560 | "pager",
561 | "palm_tree",
562 | "panda_face",
563 | "paperclip",
564 | "parking",
565 | "part_alternation_mark",
566 | "partly_sunny",
567 | "passport_control",
568 | "paw_prints",
569 | "peach",
570 | "pear",
571 | "pencil",
572 | "pencil2",
573 | "penguin",
574 | "pensive",
575 | "performing_arts",
576 | "persevere",
577 | "person_frowning",
578 | "person_with_blond_hair",
579 | "person_with_pouting_face",
580 | "phone",
581 | "pig",
582 | "pig2",
583 | "pig_nose",
584 | "pill",
585 | "pineapple",
586 | "pisces",
587 | "pizza",
588 | "plus1",
589 | "point_down",
590 | "point_left",
591 | "point_right",
592 | "point_up",
593 | "point_up_2",
594 | "police_car",
595 | "poodle",
596 | "poop",
597 | "post_office",
598 | "postal_horn",
599 | "postbox",
600 | "potable_water",
601 | "pouch",
602 | "poultry_leg",
603 | "pound",
604 | "pouting_cat",
605 | "pray",
606 | "princess",
607 | "punch",
608 | "purple_heart",
609 | "purse",
610 | "pushpin",
611 | "put_litter_in_its_place",
612 | "question",
613 | "rabbit",
614 | "rabbit2",
615 | "racehorse",
616 | "radio",
617 | "radio_button",
618 | "rage",
619 | "rage1",
620 | "rage2",
621 | "rage3",
622 | "rage4",
623 | "railway_car",
624 | "rainbow",
625 | "raised_hand",
626 | "raised_hands",
627 | "raising_hand",
628 | "ram",
629 | "ramen",
630 | "rat",
631 | "recycle",
632 | "red_car",
633 | "red_circle",
634 | "registered",
635 | "relaxed",
636 | "relieved",
637 | "repeat",
638 | "repeat_one",
639 | "restroom",
640 | "revolving_hearts",
641 | "rewind",
642 | "ribbon",
643 | "rice",
644 | "rice_ball",
645 | "rice_cracker",
646 | "rice_scene",
647 | "ring",
648 | "rocket",
649 | "roller_coaster",
650 | "rooster",
651 | "rose",
652 | "rotating_light",
653 | "round_pushpin",
654 | "rowboat",
655 | "ru",
656 | "rugby_football",
657 | "runner",
658 | "running",
659 | "running_shirt_with_sash",
660 | "sa",
661 | "sagittarius",
662 | "sailboat",
663 | "sake",
664 | "sandal",
665 | "santa",
666 | "satellite",
667 | "satisfied",
668 | "saxophone",
669 | "school",
670 | "school_satchel",
671 | "scissors",
672 | "scorpius",
673 | "scream",
674 | "scream_cat",
675 | "scroll",
676 | "seat",
677 | "secret",
678 | "see_no_evil",
679 | "seedling",
680 | "seven",
681 | "shaved_ice",
682 | "sheep",
683 | "shell",
684 | "ship",
685 | "shipit",
686 | "shirt",
687 | "shit",
688 | "shoe",
689 | "shower",
690 | "signal_strength",
691 | "six",
692 | "six_pointed_star",
693 | "ski",
694 | "skull",
695 | "sleeping",
696 | "sleepy",
697 | "slot_machine",
698 | "small_blue_diamond",
699 | "small_orange_diamond",
700 | "small_red_triangle",
701 | "small_red_triangle_down",
702 | "smile",
703 | "smile_cat",
704 | "smiley",
705 | "smiley_cat",
706 | "smiling_imp",
707 | "smirk",
708 | "smirk_cat",
709 | "smoking",
710 | "snail",
711 | "snake",
712 | "snowboarder",
713 | "snowflake",
714 | "snowman",
715 | "sob",
716 | "soccer",
717 | "soon",
718 | "sos",
719 | "sound",
720 | "space_invader",
721 | "spades",
722 | "spaghetti",
723 | "sparkle",
724 | "sparkler",
725 | "sparkles",
726 | "sparkling_heart",
727 | "speak_no_evil",
728 | "speaker",
729 | "speech_balloon",
730 | "speedboat",
731 | "squirrel",
732 | "star",
733 | "star2",
734 | "stars",
735 | "station",
736 | "statue_of_liberty",
737 | "steam_locomotive",
738 | "stew",
739 | "straight_ruler",
740 | "strawberry",
741 | "stuck_out_tongue",
742 | "stuck_out_tongue_closed_eyes",
743 | "stuck_out_tongue_winking_eye",
744 | "sun_with_face",
745 | "sunflower",
746 | "sunglasses",
747 | "sunny",
748 | "sunrise",
749 | "sunrise_over_mountains",
750 | "surfer",
751 | "sushi",
752 | "suspect",
753 | "suspension_railway",
754 | "sweat",
755 | "sweat_drops",
756 | "sweat_smile",
757 | "sweet_potato",
758 | "swimmer",
759 | "symbols",
760 | "syringe",
761 | "tada",
762 | "tanabata_tree",
763 | "tangerine",
764 | "taurus",
765 | "taxi",
766 | "tea",
767 | "telephone",
768 | "telephone_receiver",
769 | "telescope",
770 | "tennis",
771 | "tent",
772 | "thought_balloon",
773 | "three",
774 | "thumbsdown",
775 | "thumbsup",
776 | "ticket",
777 | "tiger",
778 | "tiger2",
779 | "tired_face",
780 | "tm",
781 | "toilet",
782 | "tokyo_tower",
783 | "tomato",
784 | "tongue",
785 | "top",
786 | "tophat",
787 | "tractor",
788 | "traffic_light",
789 | "train",
790 | "train2",
791 | "tram",
792 | "triangular_flag_on_post",
793 | "triangular_ruler",
794 | "trident",
795 | "triumph",
796 | "trolleybus",
797 | "trollface",
798 | "trophy",
799 | "tropical_drink",
800 | "tropical_fish",
801 | "truck",
802 | "trumpet",
803 | "tshirt",
804 | "tulip",
805 | "turtle",
806 | "tv",
807 | "twisted_rightwards_arrows",
808 | "two",
809 | "two_hearts",
810 | "two_men_holding_hands",
811 | "two_women_holding_hands",
812 | "u5272",
813 | "u5408",
814 | "u55b6",
815 | "u6307",
816 | "u6708",
817 | "u6709",
818 | "u6e80",
819 | "u7121",
820 | "u7533",
821 | "u7981",
822 | "u7a7a",
823 | "uk",
824 | "umbrella",
825 | "unamused",
826 | "underage",
827 | "unlock",
828 | "up",
829 | "us",
830 | "v",
831 | "vertical_traffic_light",
832 | "vhs",
833 | "vibration_mode",
834 | "video_camera",
835 | "video_game",
836 | "violin",
837 | "virgo",
838 | "volcano",
839 | "vs",
840 | "walking",
841 | "waning_crescent_moon",
842 | "waning_gibbous_moon",
843 | "warning",
844 | "watch",
845 | "water_buffalo",
846 | "watermelon",
847 | "wave",
848 | "wavy_dash",
849 | "waxing_crescent_moon",
850 | "waxing_gibbous_moon",
851 | "wc",
852 | "weary",
853 | "wedding",
854 | "whale",
855 | "whale2",
856 | "wheelchair",
857 | "white_check_mark",
858 | "white_circle",
859 | "white_flower",
860 | "white_large_square",
861 | "white_medium_small_square",
862 | "white_medium_square",
863 | "white_small_square",
864 | "white_square_button",
865 | "wind_chime",
866 | "wine_glass",
867 | "wink",
868 | "wolf",
869 | "woman",
870 | "womans_clothes",
871 | "womans_hat",
872 | "womens",
873 | "worried",
874 | "wrench",
875 | "x",
876 | "yellow_heart",
877 | "yen",
878 | "yum",
879 | "zap",
880 | "zero",
881 | "zzz"];
882 | var emoji_count = emoji.length;


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>FireTeller</title>
 6 |     <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
 7 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
 8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 9 |     <script src="https://cdn.auth0.com/js/lock-9.min.js"></script>
10 |     <script src="https://cdn.auth0.com/w2/auth0-6.7.js"></script>
11 |     <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
12 |     <style>
13 |       .em {
14 |         width: 32px;
15 |         height: 32px;
16 |         margin-right: 25px;
17 |         margin-bottom: 25px;
18 |       }
19 |       .top-bar {
20 |         margin-top: 25px;
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div class="container">
26 |       <div class="col-sm-8 col-sm-offset-2">
27 |         <div class="clearfix top-bar">
28 |           <div id="email" class="pull-left"></div>
29 |           <div class="pull-right">
30 |             <a onclick="logout()" class="btn btn-danger" id="logout-btn">Logout</a>
31 |           </div>
32 |         </div>
33 |       </div>
34 | 
35 |       <div class="col-sm-10 col-sm-offset-1">
36 |         <h2 class="text-center">Once Upon a Time...</h2>
37 | 
38 |         <div class="jumbotron">
39 |           <div id="story"></div>
40 |         </div>
41 |       </div>
42 | 
43 |       <div class="col-sm-8 col-sm-offset-2">
44 |         <div id="signin-btn" class="btn btn-success btn-block" onclick="login()">Sign Up To Contribute</div>
45 |         <div id="contrinbute">
46 |           <p><strong>Contribute <small>(Select an emoji to add it to the story)</small> <span class="pull-right" onclick="getRandomEmoji()">Refresh</span></strong></p>
47 |           <div id="options"></div>
48 |         </div>
49 |       </div>
50 | 
51 |       <div class="col-sm-8 col-sm-offset-2">
52 |         <h2 class="text-center">Stories</h2>
53 |         <div id="stories"></div>
54 |       </div>
55 |     </div>
56 |     <script src="./emoji.js"></script>
57 |     <script src="./app.js"></script>
58 |   </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------