Login Example

by AnnMariePrice

HTML

<script src="https://da189i1jfloii.cloudfront.net/js/kinvey-html5-sdk-3.9.6.min.js"></script>
<div id="wrapper" class="wrapper">
    <div class="container">
        <h1>Welcome</h1>
        <div id="error" class="error"></div>
        <form class="form" id="signup">
            <input type="email" id="email" placeholder="Username" required>
            <input type="password" id="password" placeholder="Password" required>
            <button type="button" id="login-button" class="loginbutton">Login</button>
            <button type="button" id="signup-button" class="loginbutton">Sign Up</button><br>
            <button type="button" id="google-login" class="google-button">
            <span class="google-button__icon">
                <svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg"><path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/></svg>
            </span>
            <span class="google-button__text">Sign in with Google</span>
            </button>
            <div class="nosignin"><a href="#" id="nosignin">Continue without signing...

CSS

/* most styles borrowed from
https://codepen.io/Lewitje/pen/BNNJjo?q=login&order=popularity&depth=everything&show_forks=false
*/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}
body {
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
body ::-webkit-input-placeholder {
  /* WebKit browsers */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
body :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
.wrapper {
  background: #50a3a2;
  background: -webkit-gradient(linear, left top, right bottom, from(#50a3a2), to(#53e3a6));
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 450px;
  margin-top: -200px;
  overflow: hidden;
}
.wrapper.form-success .container h1 {
  -webkit-transform: translateY(85px);
          transform: translateY(85px);
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 80px 0;
  height: 400px;
  text-align: center;
}
.container h1 {
  font-size: 40px;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-put;
          transition-timing-function: ease-in-put;
  font-weight: 200;
}
form {
  padding: 20px 0;
  position: relative;
  z-index: 2;
}
form input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255,...

JavaScript

var client = Kinvey.init({
    appKey: 'kid_rk7NMn57z',
    appSecret: '3ecc483bd0864882b0c69965030961c6'
});

const heroRoleId = '0278b7bf-749f-453f-9b74-4a0b2afcfcff',
    villainRoleId = '1707214d-5c2f-436c-82d4-6e198749251d';

// for the sake of simplicity in a sample app, I am always logging the current active user out when the page is loaded
var promise = Kinvey.User.logout();

// sign up a new user with Kinvey authentication
document.getElementById('signup-button').addEventListener('click', function(event) {
    // If you want to validate these inputs before sending them to the backend you should do that here
    var user = new Kinvey.User();
    var promise = user.signup({
        username: document.getElementById('email').value,
        password: document.getElementById('password').value
    })
    .then(function(user) {
        loginSuccess();
        console.log(user);
    })
    .catch(function(error) {
        // for the sake of simplicity, I'm just displaying any errors that the API sends me back
        document.getElementById('error').innerHTML = error.message;
    });
});

// login using the Kinvey authentication
document.getElementById('login-button').addEventListener('click', function(event) {
    var user = new Kinvey.User();
    var promise = user.login({
        username: document.getElementById('email').value,
        password: document.getElementById('password').value
    })
    .then(function(user) {
        loginSuccess();
        console.log(user);
    })
    .catch(function(error) {
        document.getElementById('error').innerHTML = error.message;
    });
});

// sign up or log in with Google authentication
document.getElementById('google-login').addEventListener('click', function(event) {
    var promise = Kinvey.User.loginWithMIC(window.location.href);
    promise.then(function onSuccess(user) {
        loginSuccess();
        console.log(user);
    }).catch(function onError(error) {
       ...