(feature) start blockstack integration: Hello World

Author: Zach Lysobey

cors/.firebaserc

@@ -0,0 +1 @@
+{}

cors/_headers

@@ -0,0 +1,8 @@
+/index.html
+  Access-Control-Allow-Origin: *
+  Access-Control-Allow-Headers: "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
+  Access-Control-Allow-Methods: "POST, GET, OPTIONS, DELETE, PUT"
+/manifest.json
+  Access-Control-Allow-Origin: *
+  Access-Control-Allow-Headers: "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
+  Access-Control-Allow-Methods: "POST, GET, OPTIONS, DELETE, PUT"

cors/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

cors/firebase.json

@@ -0,0 +1,23 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ],
+    "headers": [ {
+     "source" : "manifest.json",
+     "headers" : [ {
+       "key" : "Access-Control-Allow-Origin",
+       "value" : "*"
+     } ]
+   } ]
+  }
+}

src/App.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
-import logo from './logo.svg';
+import { UserSession } from 'blockstack';
+
 import './App.css';
 
-const App: React.FC = () => {
+import { SignedIn } from './SignedIn';
+import { Landing } from './Landing';
+
+interface Props {
+  userSession: UserSession
+}
+const App: React.FC<Props> = ({
+  userSession
+}) => {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <p>Learning Blockstack!</p>
+        {
+          userSession.isUserSignedIn()
+            ? <SignedIn name={'World'}/>
+            : <Landing userSession={userSession}/>
+          }
       </header>
     </div>
   );

src/Landing.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { UserSession } from 'blockstack'
+
+interface Props {
+    userSession: UserSession
+}
+export const Landing: React.FC<Props> = ({ userSession }) => {
+    const signIn = () => userSession.redirectToSignIn()
+    return <>
+        <p>Landing...</p>
+
+        <button
+            onClick={signIn}
+        >
+            Sign in
+        </button>
+    </>
+}

src/SignedIn.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+interface AppProps {
+  name: string
+}
+export const SignedIn: React.FC<AppProps> = ({
+  name
+}) => {
+  console.log({ name })
+  return <p>Signed In. Hello {name}!</p>
+}

src/index.tsx

@@ -4,7 +4,29 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import { UserSession, AppConfig } from 'blockstack';
+
+const appConfig = new AppConfig(['store_write', 'publish_data'])
+const userSession = new UserSession({ appConfig });
+
+const isUserSignedIn = userSession.isUserSignedIn()
+const isSignInPending = userSession.isSignInPending()
+
+if (!isUserSignedIn && isSignInPending) {
+    userSession.handlePendingSignIn()
+        .then((userData) => {
+            if (!userData.username) {
+                throw new Error('This app requires a username.')
+            }
+            window.location.href = `/kingdom/${userData.username}`
+        })
+}
+
+const app = <App userSession={userSession} />;
+
+const $root = document.getElementById('root');
+
+ReactDOM.render(app, $root);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/setupProxy.js

@@ -0,0 +1,17 @@
+// 'React-scripts start' sets up a development server that automatically
+// registers files with this name. This proxy file sets up a CORS header
+// for manifest.json, allowing sign in via Blockstack without using
+// the webpack configuration file that create-react-app has configured 
+// and hidden.
+
+module.exports = function(app) {
+  app.get('/manifest.json', (req, res, next) => {
+    res.set({
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers': '*',
+      'Access-Control-Allow-Methods': 'GET',
+      'X-random': 'random'
+    });
+    next();
+  })
+};