initial Auth implementation (#44)

* initial implementation

* update api url

package.json

@@ -20,6 +20,7 @@
     "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
     "react-scripts": "5.0.1",
+    "swr": "^2.0.4",
     "three": "^0.146.0",
     "typescript": "^4.4.2",
     "util": "^0.12.5",

src/Auth.tsx

@@ -0,0 +1,31 @@
+import useSWR from 'swr'
+import fetcher from './lib/fetcher'
+import withBaseUrl from './lib/withBaseURL'
+import App from './App'
+
+export const Auth = () => {
+  const { data: user, error } = useSWR(withBaseUrl('/user'), fetcher) as any
+  const isLocalHost =
+    typeof window !== 'undefined' && window.location.hostname === 'localhost'
+
+  if (!user && !isLocalHost) {
+    return (
+      <>
+        <div className=" bg-gray-800 p-1 px-4 rounded-r-lg pointer-events-auto flex items-center">
+          <a
+            className="font-bold mr-2 text-purple-400"
+            rel="noopener noreferrer"
+            target={'_self'}
+            href={`https://dev.kittycad.io/signin?callbackUrl=${encodeURIComponent(
+              typeof window !== 'undefined' && window.location.href
+            )}`}
+          >
+            Sign in
+          </a>
+        </div>
+      </>
+    )
+  }
+
+  return <App />
+}

src/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import App from './App'
+import { Auth } from './Auth'
 import reportWebVitals from './reportWebVitals'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <React.StrictMode>
-    <App />
+    <Auth />
   </React.StrictMode>
 )
 

src/lib/fetcher.ts

@@ -0,0 +1,8 @@
+export default async function fetcher<JSON = any>(
+  input: RequestInfo,
+  init: RequestInit = {}
+): Promise<JSON> {
+  const credentials = 'include'
+  const res = await fetch(input, { ...init, credentials })
+  return res.json()
+}

src/lib/withBaseURL.ts

@@ -0,0 +1,4 @@
+export default function withBaseUrl(path: string): string {
+  const baseUrl = 'https://dev.api.kittycad.io'
+  return baseUrl + path
+}

yarn.lock

@@ -9746,6 +9746,13 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swr@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.0.4.tgz#e68a5cc2e87b2a7f5f7ebf8a472cea24fc1c5fce"
+  integrity sha512-4GUiTjknRUVuw4MWUHR7mzJ9G/DWL+yZz/TgWDfiA0OZ9tL6qyrTkN2wPeboBpL3OJTkej3pexh3mWCnv8cFkQ==
+  dependencies:
+    use-sync-external-store "^1.2.0"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -10250,7 +10257,7 @@ use-resize-observer@^9.0.0:
   dependencies:
     "@juggle/resize-observer" "^3.3.1"
 
-use-sync-external-store@1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==