JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<button class="signin-google">Sign in with Google (redirect)</button><br>
<button class="signin-google-popup">Sign in with Google (popup)</button><br>
<br><p>--- or ---</p>
<label>Email</label><input type="text" id="email"><br>
<label>Password</label><input type="password" id="password"><br>
<button class="signin-db">Sign in with Email/Password</button>

<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script>
  var webAuth = new auth0.WebAuth({
    domain:         'icodeforlove.auth0.com',
    clientID:       'D3r8040Qw7Xu9PdDREBLr0X7bm0bV0Jv',
    redirectUri:    'http://localhost:3000'
  });
  // sign-in with social provider with plain redirect
  $('.signin-google').on('click', function() {
    webAuth.authorize({
      connection: 'google-oauth2' // use connection identifier
    });
  });
  // sign-in with social provider using a popup (window.open)
  $('.signin-google-popup').on('click', function() {
    webAuth.popup.authorize({
      connection: 'google-oauth2',
      responseType: 'token id_token'
    }, console.log);
  });

  $('.signin-db').on('click', function() {
    webAuth.login({
      realm: 'tests',
      username: 'testuser',
      password: 'testpass',
      responseType: 'token id_token'
    }, console.log);
  });
  // Parse the authentication result
  webAuth.parseHash((err, authResult) => {
    if (authResult) {
      // Save the tokens from the authResult in local storage or a cookie
      localStorage.setItem('access_token', authResult.accessToken);
      localStorage.setItem('id_token', authResult.idToken);
    } else if (err) {
      // Handle errors
      console.log(err);
    }
  });
</script>