chat-app #2: konfigurasi auth0 & hasura untuk backend aplikasi chat tanpa harus coding

Ini adalah bahan untuk video youtube diatas:

1. Link untuk deploy hasura ke heroku => DEPLOY HASURA KE HEROKU
2. Code snippet auth0 rules. 

function (user, context, callback) {
  const userId = user.user_id;
  const fullname = user.name;
  const picture = user.picture;
  const email = user.email;
  
  const admin_secret = "<hasura-admin-secret>";
  const url = "https://<heroku-app-name>.herokuapp.com/v1/graphql";
  request.post({
      headers: {'content-type' : 'application/json', 'x-hasura-admin-secret': admin_secret},
      url:   url,
      body:    `{\"query\":\"mutation($userId: String!, $fullname: String, $picture: String, $email: String) {\\n          insert_users(\\n            objects: [{ id: $userId, name: $fullname, picture: $picture, email: $email}]\\n            on_conflict: {\\n              constraint: users_pkey\\n              update_columns: [name]\\n            }\\n          ) {\\n            affected_rows\\n          }\\n        }\",\"variables\":{\"userId\":\"${userId}\",\"fullname\":\"${fullname}\",\"picture\":\"${picture}\",\"email\":\"${email}\"}}`
  }, function(error, response, body){
       callback(null, user, context);
  });
}

1. ganti  <hasura-admin-secret> 
2. ganti  <heroku-app-name> 

3. React Auth0 code snippet

  <Auth0Provider
    domain="AUTH0_DOMAIN"
    clientId="AUTH0_CLIENTID"
    redirectUri="http://localhost:3000"
    scope="read:current_user update:current_user_metadata"
  >
    <App />
  </Auth0Provider>

4. hasura.io/jwt-config/

5. hasura-jwt-claim

function (user, context, callback) {
  const namespace = "https://hasura.io/jwt/claims";
  context.idToken[namespace] = 
    { 
      'x-hasura-default-role': 'user',
      // do some custom logic to decide allowed roles
      'x-hasura-allowed-roles': ['user'],
      'x-hasura-user-id': user.user_id
    };
  callback(null, user, context);
}

---

FINAL CODE
App.js

import logo from './logo.svg';
import './App.css';
import {useAuth0} from "@auth0/auth0-react";

function App() {
  const {loginWithRedirect, getIdTokenClaims, logout} = useAuth0();
  getIdTokenClaims().then(resp => {
    console.log(resp);
  })

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button
          className="App-link"
          onClick={() => {loginWithRedirect()}}
          target="_blank"
          rel="noopener noreferrer"
        >
          Login
        </button>
        <button
          className="App-link"
          onClick={() => {logout()}}
          target="_blank"
          rel="noopener noreferrer"
        >
          Logout
        </button>
      </header>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Auth0Provider} from '@auth0/auth0-react';

ReactDOM.render(
  <Auth0Provider
    domain="xxxxxxxxx.au.auth0.com"
    clientId="xxxxxxxxxxxxxxxxx"
    redirectUri="http://localhost:3000"
    scope="read:current_user update:current_user_metadata"
  >
    <App />
  </Auth0Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

untuk keseluruhan source code, bisa dilihat disini https://github.com/ponkcoding/ponk-chat-app/tree/v0.1.0