Skip to content

Instantly share code, notes, and snippets.

Avatar
🙃

William Lee wlee221

🙃
View GitHub Profile
@wlee221
wlee221 / signUp.ts
Created Oct 22, 2021
abstracting out "states" with typescript
View signUp.ts
import { get } from 'lodash';
import { ActionObject, createMachine, sendUpdate, StatesConfig } from 'xstate';
import { Auth } from 'aws-amplify';
import { passwordMatches, runValidators } from '../../../validators';
import { AuthEvent, SignUpContext } from '../../../types';
import {
clearError,
clearFormValues,
@wlee221
wlee221 / angular.json
Created Sep 28, 2021
Remove CommonJS or AMD dependencies optimization bailouts warnings for AWS Amplify using Angular v10
View angular.json
"build": {
"builder": "@angular-devkit/build-angular:browser",
...
"options": {
"allowedCommonJsDependencies": [
"@aws-crypto/crc32",
"@aws-crypto/sha256-browser",
"@aws-crypto/sha256-js",
"axios",
"buffer",
View types.d.ts
// workaround for using typescript strict mode with amplify-js.
// src/types.d.ts
declare module 'graphql/language/ast' { export type DocumentNode = any }
declare module 'graphql/error/GraphQLError' { export type GraphQLError = any }
View aws-exports.d.ts
// put this at the same level as aws-exports
declare const awsmobile: Record<string, any>
export default awsmobile;
View App.tsx
import Amplify from "aws-amplify";
import {
CognitoUserInterface,
onAuthUIStateChange,
AuthState,
} from "@aws-amplify/ui-components";
import { AmplifyAuthenticator, AmplifyTotpSetup } from "@aws-amplify/ui-react";
import { useEffect, useState } from "react";
Amplify.configure({ /** redacted */ });
View machine.js
const fetchMachine = Machine({
id: "signUp",
initial: "edit",
type: 'parallel',
states: {
validation: {
initial: 'pending',
states: {
pending: {
invoke: {
View machine.js
Machine(
{
id: 'signUp',
initial: "edit",
exit: ["clearFormValues", "clearError"],
states: {
edit: {
on: {
SUMBIT: "submit"
}
View machine.js
Machine(
{
id: 'signUp',
initial: "edit",
exit: ["clearFormValues", "clearError"],
states: {
edit: {
id: "edit",
initial: "noError",
type: "parallel",
View amplify-authenticator.tsx
import { Component, State, Prop, h, Host, Element, forceUpdate } from '@stencil/core';
import {
AuthState,
CognitoUserInterface,
FederatedConfig,
UsernameAliasStrings,
AuthStateHandler,
} from '../../common/types/auth-types';
import {
AUTH_CHANNEL,
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions