Change Authentication (codesandbox#58)

* Use localStorage auth

* Add sign out function

* Remove Pricing api change

* Add notice for sign out

* Use an exclamation mark

Author: CompuIves

src/app/containers/Modal.js

@@ -74,7 +74,7 @@ const ModalTitle = styled.h1`
   margin: 0;
   font-size: 1.25rem;
   text-align: center;
-  background-image: linear-gradient(-225deg, #31B0FF 0%, #47A8E5 100%);
+  background-image: linear-gradient(-225deg, #31b0ff 0%, #47a8e5 100%);
 `;
 
 const ModalBody = styled.div`
@@ -130,9 +130,10 @@ class ModalContainer extends React.PureComponent {
       >
         {modal.open &&
           <BaseModal>
-            <ModalTitle>
-              {modal.title}
-            </ModalTitle>
+            {modal.title &&
+              <ModalTitle>
+                {modal.title}
+              </ModalTitle>}
             <ModalBody>
               {modal.Body}
             </ModalBody>

src/app/containers/modals/SignOutNotice.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import userActionCreators from 'app/store/user/actions';
+import modalActionCreators from 'app/store/modal/actions';
+import Button from '../../components/buttons/Button';
+import Row from '../../components/flex/Row';
+
+const Container = styled.div`
+  background-color: ${props => props.theme.background};
+  padding: 1rem;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.8);
+`;
+
+const Heading = styled.h2`margin-top: 0;`;
+
+const Explanation = styled.p`
+  line-height: 1.3;
+  margin-bottom: 2rem;
+`;
+
+const mapDispatchToProps = dispatch => ({
+  userActions: bindActionCreators(userActionCreators, dispatch),
+  modalActions: bindActionCreators(modalActionCreators, dispatch),
+});
+const SignOutNotice = ({
+  userActions,
+  modalActions,
+}: {
+  userActions: typeof userActionCreators,
+  modalActions: typeof modalActionCreators,
+}) =>
+  <Container>
+    <Heading>You have been signed out</Heading>
+    <Explanation>
+      CodeSandbox has migrated to a system where authorization tokens can be
+      managed and revoked, and we had to sign everyone out for this.
+      <br />
+      <br />But don{"'"}t worry, you can sign in right again!
+    </Explanation>
+
+    <Row justifyContent="space-around">
+      <Button
+        block
+        style={{ marginRight: '.5rem' }}
+        red
+        onClick={modalActions.closeModal}
+      >
+        Close
+      </Button>
+      <Button
+        block
+        style={{ marginLeft: '.5rem' }}
+        onClick={() => userActions.signIn().then(modalActions.closeModal)}
+      >
+        Sign in
+      </Button>
+    </Row>
+  </Container>;
+
+export default connect(null, mapDispatchToProps)(SignOutNotice);

src/app/store/user/actions.js

@@ -1,11 +1,16 @@
 // @flow
+import React from 'react';
 import { signInUrl } from 'app/utils/url-generator';
 import { identify } from 'app/utils/analytics';
 
+import SignOutNotice from 'app/containers/modals/SignOutNotice';
+
 import { createAPIActions, doRequest } from '../api/actions';
 import notifActions from '../notifications/actions';
+import modalActions from '../modal/actions';
 
 import openPopup from './utils/popup';
+import { resetJwt, setJwt } from './utils/jwt';
 import { jwtSelector } from './selectors';
 
 export const SIGN_IN = 'SIGN_IN';
@@ -14,6 +19,7 @@ export const SET_CURRENT_USER = 'SET_CURRENT_USER';
 export const SIGN_OUT = 'SIGN_OUT';
 export const SET_USER_SANDBOXES = 'SET_USER_SANDBOXES';
 
+export const SIGN_OUT_API = createAPIActions('SIGN_OUT_API', 'DELETE');
 export const GET_CURRENT_USER_API = createAPIActions('CURRENT_USER', 'FETCH');
 export const UPDATE_CURRENT_USER_API = createAPIActions(
   'CURRENT_USER',
@@ -26,12 +32,16 @@ export const LOAD_USER_SANDBOXES = createAPIActions(
 export const SEND_FEEDBACK_API = createAPIActions('FEEDBACK', 'SEND');
 export const GET_AUTH_TOKEN_API = createAPIActions('AUTH_TOKEN', 'FETCH');
 
-const deleteCookie = (name: string) => {
-  document.cookie = `${name}=; Path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
-};
+const signOut = (apiRequest = true) => async (dispatch: Function) => {
+  if (apiRequest) {
+    await dispatch(
+      doRequest(SIGN_OUT_API, 'users/signout', {
+        method: 'DELETE',
+      }),
+    );
+  }
 
-const signOut = () => async (dispatch: Function) => {
-  deleteCookie('jwt');
+  await resetJwt();
 
   dispatch({
     type: SIGN_OUT,
@@ -51,7 +61,13 @@ const getCurrentUser = () => async (dispatch: Function, getState: Function) => {
       dispatch({ type: SET_CURRENT_USER, data });
       return data;
     } catch (e) {
-      dispatch(signOut());
+      if (e.response.status === 401) {
+        dispatch(
+          modalActions.openModal({ Body: <SignOutNotice />, width: 500 }),
+        );
+        await dispatch(signOut(false));
+      }
+      return null;
     }
   }
 };
@@ -66,6 +82,7 @@ const signIn = () => (dispatch: Function) =>
     window.addEventListener('message', function(e) {
       if (e.data.type === 'signin') {
         const jwt = e.data.data.jwt;
+        setJwt(jwt);
         window.removeEventListener('message', this);
         popup.close();
 

src/app/store/user/utils/jwt.js

@@ -1,3 +1,17 @@
+import store from 'store/dist/store.modern';
+
 export default function getJwt() {
-  return (document.cookie.match(/[; ]?jwt=([^\s;]*)/) || [])[1];
+  // TODO remove cookie
+  return (
+    store.get('jwt') || (document.cookie.match(/[; ]?jwt=([^\s;]*)/) || [])[1]
+  );
+}
+
+export function resetJwt() {
+  document.cookie = `jwt=; Path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+  return store.set('jwt', null);
+}
+
+export function setJwt(jwt: string) {
+  return store.set('jwt', jwt);
 }