Add dev auth for localhost (codesandbox#2750)

* Add dev auth

* Add error message

* Fix ok checking

Author: CompuIves

packages/app/src/app/overmind/internalActions.ts

@@ -98,10 +98,11 @@ export const signInGithub: Action<
   { useExtraScopes: boolean },
   Promise<string>
 > = ({ effects }, options) => {
-  const popup = effects.browser.openPopup(
-    `/auth/github${options.useExtraScopes ? '?scope=user:email,repo' : ''}`,
-    'sign in'
-  );
+  const authPath = process.env.LOCAL_SERVER
+    ? '/auth/dev'
+    : `/auth/github${options.useExtraScopes ? '?scope=user:email,repo' : ''}`;
+
+  const popup = effects.browser.openPopup(authPath, 'sign in');
 
   return effects.browser
     .waitForMessage<{ jwt: string }>('signin')

packages/app/src/app/pages/DevAuth/elements.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  height: 100%;
+  width: 100%;
+  margin: 1rem;
+  margin-top: 10%;
+`;

packages/app/src/app/pages/DevAuth/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Title } from 'app/components/Title';
+import { SubTitle } from 'app/components/SubTitle';
+import Input from '@codesandbox/common/lib/components/Input';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
+
+import { Container } from './elements';
+
+export const DevAuthPage = () => {
+  const [authCode, setAuthCode] = React.useState('');
+  const [error, setError] = React.useState<string | null>(null);
+
+  const getJWTToken = () => {
+    setError(null);
+    let ok = true;
+    fetch(`/api/v1/auth/verify/${authCode}`)
+      .then(res => {
+        ok = res.ok;
+        return res.json();
+      })
+      .then(res => {
+        if (!ok) {
+          throw new Error(res.errors.detail[0]);
+        }
+        if (
+          window.opener &&
+          window.opener.location.origin === window.location.origin
+        ) {
+          window.opener.postMessage(
+            {
+              type: 'signin',
+              data: {
+                jwt: res.data.token,
+              },
+            },
+            protocolAndHost()
+          );
+        }
+      })
+      .catch(e => {
+        setError(e.message);
+      });
+  };
+
+  return (
+    <Container>
+      <Title>Developer Sign In</Title>
+      <SubTitle style={{ width: 800 }}>
+        Please enter the token you get from{' '}
+        <a
+          href="https://codesandbox.io/cli/login"
+          target="popup"
+          rel="noreferrer noopener"
+          onClick={e => {
+            e.preventDefault();
+            window.open(
+              'https://codesandbox.io/cli/login',
+              'popup',
+              'width=600,height=600'
+            );
+            return false;
+          }}
+        >
+          here
+        </a>
+        . This token will sign you in with your account from codesandbox.io.
+      </SubTitle>
+      <div
+        style={{ display: 'flex', justifyContent: 'center', marginTop: '2rem' }}
+      >
+        <Input
+          style={{ width: 600, fontSize: '1.5rem' }}
+          placeholder="Auth Code"
+          value={authCode}
+          onChange={e => {
+            setAuthCode(e.target.value);
+          }}
+        />
+        <Button onClick={getJWTToken}>Submit</Button>
+      </div>
+
+      {error && <div style={{ marginTop: '1rem' }}>Error: {error}</div>}
+    </Container>
+  );
+};

packages/app/src/app/pages/index.tsx

@@ -15,6 +15,7 @@ import Modals from './common/Modals';
 import Sandbox from './Sandbox';
 import NewSandbox from './NewSandbox';
 import Dashboard from './Dashboard';
+import { DevAuthPage } from './DevAuth';
 import { Container, Content } from './elements';
 
 const routeDebugger = _debug('cs:app:router');
@@ -112,7 +113,10 @@ const RoutesComponent: React.FC = () => {
             <Route path="/cli/login" component={CLI} />
             <Route path="/auth/zeit" component={ZeitSignIn} />
             {process.env.NODE_ENV === `development` && (
-              <Route path="/codesadbox" component={CodeSadbox} />
+              <>
+                <Route path="/auth/dev" component={DevAuthPage} />
+                <Route path="/codesadbox" component={CodeSadbox} />
+              </>
             )}
             <Route component={NotFound} />
           </Switch>