quiaro

REACT RALLY 2018

Shirley Wu | @sxywu
Offers courses in Frontend Masters

D3 and React
https://twitter.com/sxywu/status/1030209690880303104

Main takeaway:
Use D3 for layout calculations and React for controlling rendering by passing props to SVG elements

quiaro

const jwt = require('jsonwebtoken');
const jwkRsa = require('jwks-rsa');
const fromEvent = require('graphcool-lib').fromEvent;

const verifyToken = token =>
  new Promise((resolve, reject) => {
    // Decode the JWT Token
    const decoded = jwt.decode(token, { complete: true });
    if (!decoded || !decoded.header || !decoded.header.kid) {
      reject('Unable to retrieve key identifier from token');

quiaro

import auth0 from 'auth0-js';

const CLIENT_DOMAIN = '__AUTH0_DOMAIN__';
const CLIENT_ID = '__AUTH0_CLIENT_ID__';
const SCOPE = 'openid email';
const REDIRECT = 'http://localhost:3000/callback';

const auth = new auth0.WebAuth({
  domain: CLIENT_DOMAIN,
  clientID: CLIENT_ID,

quiaro

type AuthenticatedUser {
  id: String!
  token: String!
}

extend type Mutation {
  authenticateUser(idToken: String!): AuthenticatedUser!
}

quiaro

import React from 'react';

export default () => (
  <div>
    <p>Login successful!</p>
  </div>
)

quiaro

import { login } from './common/auth';

export default () => {
  login();
  return null;
}

quiaro

import auth0 from 'auth0-js';

const CLIENT_DOMAIN = '__AUTH0_DOMAIN__';
const CLIENT_ID = '__AUTH0_CLIENT_ID__';
const SCOPE = 'openid';
const REDIRECT = 'http://localhost:3000/callback';

const auth = new auth0.WebAuth({
  domain: CLIENT_DOMAIN,
  clientID: CLIENT_ID,

quiaro

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './index.css';
import Home from './Home';
import LoginCallback from './LoginCallback';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <Router>

quiaro

type User @model {
  # Required system field:
  id: ID! @isUnique # read-only (managed by Graphcool)

  # Optional system fields (remove if not needed):
  createdAt: DateTime! # read-only (managed by Graphcool)
  updatedAt: DateTime! # read-only (managed by Graphcool)

  email: String
  auth0UserId: String @isUnique

quiaro

types: ./types.graphql

functions:

  authenticate:
    handler:
      code:
        src: ./src/auth0/auth0Authentication.js
        environment:
          AUTH0_DOMAIN: ${env:AUTH0_DOMAIN}