├── .gitignore
├── favicon.ico
├── images
    └── icons
    │   ├── ms.png
    │   ├── f.svg
    │   └── g.svg
├── readme.md
├── LICENSE
├── index.html
├── app.css
└── app.js


/.gitignore:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tscanlin/serverless-authentication-gh-pages/gh-pages/favicon.ico


--------------------------------------------------------------------------------
/images/icons/ms.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tscanlin/serverless-authentication-gh-pages/gh-pages/images/icons/ms.png


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Demo page for serverless-authentication
2 | 
3 | http://laardee.github.io/serverless-authentication-gh-pages/
4 | 
5 | simple authentication demo


--------------------------------------------------------------------------------
/images/icons/f.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216" class="_55a2"><path fill="white" d="
2 |           M204.1 0H11.9C5.3 0 0 5.3 0 11.9v192.2c0 6.6 5.3 11.9 11.9
3 |           11.9h103.5v-83.6H87.2V99.8h28.1v-24c0-27.9 17-43.1 41.9-43.1
4 |           11.9 0 22.2.9 25.2 1.3v29.2h-17.3c-13.5 0-16.2 6.4-16.2
5 |           15.9v20.8h32.3l-4.2 32.6h-28V216h55c6.6 0 11.9-5.3
6 |           11.9-11.9V11.9C216 5.3 210.7 0 204.1 0z"></path></svg>


--------------------------------------------------------------------------------
/images/icons/g.svg:
--------------------------------------------------------------------------------
 1 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="abcRioButtonSvg">
 2 |     <g>
 3 |         <path fill="#EA4335"
 4 |               d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
 5 |         <path fill="#4285F4"
 6 |               d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
 7 |         <path fill="#FBBC05"
 8 |               d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
 9 |         <path fill="#34A853"
10 |               d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
11 |         <path fill="none" d="M0 0h48v48H0z"></path>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Eetu Tuomala
 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 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Serverless Authentication</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
 8 |   <link rel="stylesheet" href="app.css">
 9 |   <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
10 |   <script src="app.js"></script>
11 | </head>
12 | <body>
13 | <div class="main">
14 |   <h1>Serverless Authentication</h1>
15 |   <h1 class="notice">UPDATING BACKEND</h1>
16 |   <p>This is a frontend demonstration how <a href="https://www.npmjs.com/package/serverless-authentication-boilerplate" target="_blank">Serverless Authentication boilerplate</a> works.</p>
17 |   <p>Same version of boilerplate is used in this demo, it only authenticates, no personal data is saved to db.</p>
18 |   <h2>Providers</h2>
19 |   <div class="providers">
20 |     <button id="facebook"><div class="logo"></div><div class="text">Log In</div></button>
21 |     <button id="google"><div class="logo"></div><div class="text">Sign In</div></button>
22 |     <button id="microsoft"><div class="logo"></div><div class="text">Log In</div></button>
23 |     <button id="custom-google">custom-google</button>
24 |   </div>
25 |   <div class="logout">
26 |     <button id="logout">Logout</button>
27 |   </div>
28 |   <h2>Response</h2>
29 |   <div id="token" class="response"></div>
30 |   <h2>Test</h2>
31 |   <p>Authorization token is valid for a 15 seconds, if auto refresh is checked, refresh token is used to request new authorization token</p>
32 |   <div class="testers">
33 |     <button id="test">Test token</button>
34 |     <button id="refresh">Refresh token</button>
35 |     <input type="checkbox" id="auto-refresh">Auto refresh token
36 |   </div>
37 |   <div id="test-result" class="response"></div>
38 |   <p>See also <a href="http://www.serverless.com">serverless.com</a> | <a href="https://www.sc5.io">sc5.io</a></p>
39 | </div>
40 | <script>
41 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
42 |         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
43 |       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
44 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
45 | 
46 |   ga('create', 'UA-75215422-1', 'auto');
47 |   ga('send', 'pageview');
48 | 
49 | </script>
50 | </body>
51 | </html>


--------------------------------------------------------------------------------
/app.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: 'Lato', sans-serif;
  3 |   font-size: 16px;
  4 |   background-color: #efefef;
  5 | }
  6 | 
  7 | .main {
  8 |   padding: 20px;
  9 |   margin: 10px auto;
 10 |   max-width: 800px;
 11 |   background-color: white;
 12 |   -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
 13 |   -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
 14 |   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
 15 | }
 16 | 
 17 | .notice {
 18 |   display: none;
 19 |   color: red;
 20 |   font-weight: bold;
 21 | }
 22 | 
 23 | h1 {
 24 |   font-size: 24px;
 25 |   margin-top: 0;
 26 | }
 27 | 
 28 | h2 {
 29 |   font-size: 16px;
 30 | }
 31 | 
 32 | .response {
 33 |   background-color: #cdcdcd;
 34 |   padding: 15px;
 35 |   overflow: auto;
 36 |   word-wrap: break-word;
 37 | }
 38 | 
 39 | button, .button {
 40 |   font-family: 'Lato', sans-serif;
 41 |   padding: 10px;
 42 |   font-size: 12px;
 43 |   font-weight: 700;
 44 |   text-transform: uppercase;
 45 |   border: 1px solid #ededed;
 46 |   background-color: #ededed;
 47 |   cursor: pointer;
 48 | }
 49 | 
 50 | .providers {
 51 |   display: -webkit-flex;
 52 |   display: flex;
 53 |   -webkit-flex-wrap: wrap;
 54 |   -ms-flex-wrap: wrap;
 55 |   flex-wrap: wrap;
 56 | }
 57 | 
 58 | button div.text, .button div.text {
 59 |   white-space: nowrap;
 60 | }
 61 | 
 62 | .providers button {
 63 |   background: transparent;
 64 |   height: 32px;
 65 |   padding: 3px;
 66 |   display: -webkit-flex;
 67 |   display: flex;
 68 |   margin-right: 10px;
 69 |   margin-bottom: 10px;
 70 |   -webkit-align-items: center;
 71 |   align-items: center;
 72 | }
 73 | 
 74 | .providers button div {
 75 |   display: inline-block;
 76 |   flex: auto;
 77 |   align-self: center;
 78 | }
 79 | 
 80 | .providers div.logo {
 81 |   height: 26px;
 82 |   width: 26px;
 83 | }
 84 | 
 85 | .providers div.text {
 86 |   padding: 0 10px;
 87 | }
 88 | 
 89 | .logout {
 90 |   margin-top: 20px;
 91 | }
 92 | 
 93 | button#facebook {
 94 |   background: #4c69ba;
 95 |   background: linear-gradient(#4c69ba, #3b55a0);
 96 |   color: white;
 97 |   border: none;
 98 | }
 99 | 
100 | button#facebook div.logo {
101 |   background-image: url("images/icons/f.svg");
102 |   height: 26px;
103 |   width: 26px;
104 | }
105 | 
106 | button#google div.logo {
107 |   background: url("images/icons/g.svg");
108 |   height: 22px;
109 |   width: 22px;
110 |   margin-left: 2px;
111 | }
112 | 
113 | button#microsoft div.logo {
114 |   background: url("images/icons/ms.png");
115 |   background-size: 22px 22px;
116 |   height: 22px;
117 |   width: 22px;
118 |   margin-left: 2px;
119 | }
120 | 
121 | button#test {
122 |   margin-bottom: 5px;
123 | }
124 | 
125 | a {
126 |   color: #454545;
127 | }


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var authenticationEndpoint = 'https://0ez31ged8j.execute-api.us-east-1.amazonaws.com/dev';
  4 | var contentApiEndpoint = 'https://6cr1cnmxc1.execute-api.us-east-1.amazonaws.com/dev';
  5 | function testToken() {
  6 |   var authorizationToken = localStorage.getItem('authorization_token');
  7 |   if (authorizationToken) {
  8 |     $('#test-result').html('Loading...');
  9 | 
 10 |     // set token to Authorization header
 11 |     $.ajax({
 12 |         method: 'GET',
 13 |         url: contentApiEndpoint + '/test-token',
 14 |         headers: {
 15 |           Authorization: authorizationToken
 16 |         }
 17 |       })
 18 |       .done(function (data) {
 19 |         $('#test-result').html(JSON.stringify(data));
 20 |       })
 21 |       .fail(function (error) {
 22 |         if($('#auto-refresh').prop('checked')) {
 23 |           $('#test-result').html('Refreshing token...');
 24 |           refreshToken();
 25 |         } else {
 26 |           $('#test-result').html('Unauthorized');
 27 |         }
 28 |       });
 29 |   } else {
 30 |     $('#test-result').html('Unauthorized');
 31 |   }
 32 | }
 33 | 
 34 | function refreshToken() {
 35 |   $('#test-result').html('Loading...');
 36 | 
 37 |   // refresh token
 38 |   $.ajax({
 39 |       method: 'GET',
 40 |       url: authenticationEndpoint + '/authentication/refresh/' + localStorage.getItem('refresh_token')
 41 |     })
 42 |     .done(function (data) {
 43 |       if (data.errorMessage) {
 44 |         $('#test-result').html(data.errorMessage);
 45 |       } else {
 46 |         saveResponse(data.authorization_token, data.refresh_token);
 47 |         testToken();
 48 |       }
 49 |     })
 50 |     .fail(function (error) {
 51 |       $('#test-result').html('Unauthorized');
 52 |     });
 53 | }
 54 | 
 55 | function saveResponse(authorization_token, refresh_token) {
 56 | 
 57 |   // Save token to local storage for later use
 58 |   if(authorization_token) {
 59 |     localStorage.setItem('authorization_token', authorization_token);
 60 |   }
 61 |   if(refresh_token) {
 62 |     localStorage.setItem('refresh_token', refresh_token);
 63 |   }
 64 | 
 65 |   $('#token').html('authorization_token:'+localStorage.getItem('authorization_token')+'<hr>refresh_token:'+localStorage.getItem('refresh_token'));
 66 | }
 67 | 
 68 | function getPathFromUrl(url) {
 69 |   return url.split(/[?#]/)[0];
 70 | }
 71 | 
 72 | function getQueryParams(qs) {
 73 |   qs = qs.split('+').join(' ');
 74 |   var params = {},
 75 |     tokens,
 76 |     re = /[?&]?([^=]+)=([^&]*)/g;
 77 | 
 78 |   while (tokens = re.exec(qs)) {
 79 |     params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
 80 |   }
 81 |   return params;
 82 | }
 83 | 
 84 | $(function () {
 85 |   $('.providers button').on('click', function (event) {
 86 |     var provider = $(event.currentTarget).attr('id');
 87 |     $('#token').html('Loading...');
 88 |     $('#test-result').html('Loading...');
 89 |     window.location.href = authenticationEndpoint + '/authentication/signin/' + provider;
 90 |   });
 91 | 
 92 |   $('#logout').on('click', function(event) {
 93 |     localStorage.removeItem('authorization_token');
 94 |     localStorage.removeItem('refresh_token');
 95 |     window.location.href = getPathFromUrl(window.location.href);
 96 |   });
 97 | 
 98 |   var query = getQueryParams(document.location.search);
 99 |   if (query.error){
100 |     $('#token').html(query.error);
101 |     localStorage.removeItem('authorization_token');
102 |     localStorage.removeItem('refresh_token');
103 |   } else {
104 |     var aToken = query.authorization_token || '';
105 |     var rToken = query.refresh_token || '';
106 |     saveResponse(aToken, rToken);
107 |     window.history.replaceState({authorization_token: ''}, 'serverless-authentication-gh-pages', '/serverless-authentication-gh-pages');
108 | 
109 |     // trigger test token
110 |     testToken();
111 |   }
112 | 
113 |   $('.testers #test').on('click', testToken);
114 |   $('.testers #refresh').on('click', refreshToken);
115 | });
116 | 


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