feat: create react-graphql-typescript example (#162)

* refactor: copy react-typescript to react-graphql-typescript

* refactor: change accounts.ts to use GraphQL client

* feat: implement features

* fix: not be able to load home

* fix: not loading user ip and ua

* docs: update readme

* docs: update readme

* docs: update readme with guides

* docs: update readme

* docs: update comments

* fix: two factor not working

* feat: html tag

* fix: two factor authentication

* add nodemon as dev dep

* add tests to the ci

* try to trigger ci

* update @acounts deps

* update to 0.3.0-beta.20

* Fix client build

Author: Kun Ran

.circleci/config.yml

@@ -10,3 +10,5 @@ jobs:
       - run: yarn test
       - run: cd react-typescript && yarn install --frozen-lockfile && yarn test
       - run: cd rest-express-typescript && yarn install --frozen-lockfile && yarn test
+      - run: cd react-graphql-typescript && yarn install --frozen-lockfile && yarn test
+      - run: cd graphql-server-typescript && yarn install --frozen-lockfile && yarn test

.gitignore

@@ -5,4 +5,7 @@ npm-debug.log
 yarn-error.log
 .idea
 dump.rdb
-build
+build/
+.vscode
+package-lock.json
+*/package-lock.json

README.md

@@ -1,3 +1,15 @@
 # Accounts-js examples
 
 This repository provides examples on how to use the [accounts-js](https://github.com/accounts-js/accounts) packages.
+
+REST Server + REST client example:
+
+- Server: [rest-express-typescript](./rest-express-typescript)
+- Client: [react-typescript](./react-typescript)
+
+GraphQL Server + GraphQL Client example:
+
+- Server: [graphql-server-typescript](./graphql-server-typescript)
+- Client: [react-graphql-typescript](./react-graphql-typescript)
+
+Please go to corresponding packages and see its README.

graphql-server-typescript/.DS_Store

@@ -0,0 +1,29 @@
+# graphql-server-typescript
+
+This example demonstrate how to use [accounts-js](https://github.com/accounts-js/accounts).
+
+## Prerequisites
+
+You will need a MongoDB server to run this server. If you don't have a MongoDB server running already, and you have Docker & Docker Compose, you can do
+
+```bash
+docker-compose up -d
+```
+
+to start a new one.
+
+## Getting Started
+
+```bash
+git clone https://github.com/accounts-js/examples.git
+cd graphql-server-typescript
+yarn install
+```
+
+Start the app.
+
+```bash
+yarn start
+```
+
+-> [Start the client side](../react-graphql-typescript).

graphql-server-typescript/README.md

@@ -0,0 +1,7 @@
+version: '3.6'
+services:
+  db-mongo-accounts:
+    image: mongo:3.6.5-jessie
+    ports:
+      - "27017:27017"
+    restart: always

graphql-server-typescript/docker-compose.yml

@@ -0,0 +1,36 @@
+{
+  "name": "rest-express-typescript",
+  "private": true,
+  "version": "1.0.0",
+  "main": "lib/index.js",
+  "license": "MIT",
+  "scripts": {
+    "start-only": "NODE_ENV=development nodemon -w src -x ts-node src/index.ts",
+    "start": "yarn start-only",
+    "start-services": "docker-compose up -d",
+    "prestart": "yarn start-services",
+    "build": "tsc",
+    "test": "yarn build"
+  },
+  "dependencies": {
+    "@accounts/database-manager": "0.3.0-beta.20",
+    "@accounts/graphql-api": "0.3.0-beta.20",
+    "@accounts/mongo": "0.3.0-beta.20",
+    "@accounts/password": "0.3.0-beta.20",
+    "@accounts/rest-express": "0.3.0-beta.20",
+    "@accounts/server": "0.3.0-beta.20",
+    "@types/mongoose": "5.2.0",
+    "apollo-server": "2.0.0-rc.5",
+    "cors": "2.8.4",
+    "express": "4.16.3",
+    "graphql": "0.13.2",
+    "graphql-tools": "3.0.5",
+    "mongoose": "5.2.2"
+  },
+  "devDependencies": {
+    "@types/node": "10.5.2",
+    "nodemon": "1.17.5",
+    "ts-node": "7.0.0",
+    "typescript": "2.9.2"
+  }
+}

graphql-server-typescript/package.json

@@ -0,0 +1,52 @@
+import * as mongoose from 'mongoose';
+import { AccountsServer } from '@accounts/server';
+import { AccountsPassword } from '@accounts/password';
+import { ApolloServer, makeExecutableSchema } from 'apollo-server';
+import MongoDBInterface from '@accounts/mongo';
+import { createAccountsGraphQL, accountsContext } from '@accounts/graphql-api';
+import { DatabaseManager } from '@accounts/database-manager';
+
+const start = async () => {
+  // Create database connection
+  await mongoose.connect(
+    'mongodb://localhost:27017/accounts-js-graphql-example'
+  );
+  const mongoConn = mongoose.connection;
+
+  // Build a storage for storing users
+  const userStorage = new MongoDBInterface(mongoConn);
+  // Create database manager (create user, find users, sessions etc) for Accounts-js
+  const accountsDb = new DatabaseManager({
+    sessionStorage: userStorage,
+    userStorage,
+  });
+
+  // Create accounts server that holds a lower level of all accounts operations
+  const accountsServer = new AccountsServer(
+    { db: accountsDb, tokenSecret: 'secret' },
+    {
+      password: new AccountsPassword(),
+    }
+  );
+
+  // Create GraphQL schema (with resolvers) for accounts server, exposes a GraphQL API
+  const { typeDefs, resolvers } = createAccountsGraphQL(accountsServer, {
+    extend: false,
+  });
+
+  // Only schema is not enough, we need to hook on resolvers with its provided function.
+  // @ts-ignore
+  const finalSchema = makeExecutableSchema({ typeDefs, resolvers });
+
+  // Create the Apollo Server that takes a schema and configures internal stuff
+  const server = new ApolloServer({
+    schema: finalSchema,
+    context: ({ req }) => accountsContext(req),
+  });
+
+  server.listen(4000).then(({ url }) => {
+    console.log(`🚀  Server ready at ${url}`);
+  });
+};
+
+start();

graphql-server-typescript/src/index.ts

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib",
+    "target": "es5",
+    "lib": ["es2015", "esnext.asynciterable"],
+    "sourceMap": true
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules", "lib"]
+}