Merge pull request #407 from kipr/fix-google-sign-in

Separate login to a non-isolated page + Popup auth

configs/webpack/common.js

@@ -16,6 +16,7 @@ try {
 module.exports = {
   entry: {
     app: './index.tsx',
+    login: './login/index.tsx',
     'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js'
   },
   output: {
@@ -112,7 +113,8 @@ module.exports = {
     ],
   },
   plugins: [
-    new HtmlWebpackPlugin({ template: 'index.html.ejs', }),
+    new HtmlWebpackPlugin({ template: 'index.html.ejs', excludeChunks: ['login'] }),
+    new HtmlWebpackPlugin({ template: 'login/login.html.ejs', filename: 'login.html', chunks: ['login'] }),
     new DefinePlugin({
       SIMULATOR_VERSION: JSON.stringify(require('../../package.json').version),
       SIMULATOR_GIT_HASH: JSON.stringify(commitHash),

express.js

@@ -228,6 +228,10 @@ app.use(express.static(sourceDir, {
   setHeaders: setCrossOriginIsolationHeaders,
 }));
 
+app.get('/login', (req, res) => {
+  res.sendFile(`${__dirname}/${sourceDir}/login.html`);
+});
+
 
 app.use('*', (req, res) => {
   setCrossOriginIsolationHeaders(res);

src/PageRouter.tsx

@@ -1,13 +1,8 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-
 import * as React from 'react';
 import { BrowserRouter as Router, Switch, Route, RouteComponentProps } from 'react-router-dom';
 import { auth } from './firebase/firebase';
 import routes from './pages/routes';
 import AuthRoute from './firebase/modules/auth/AuthRoute';
-import { getRedirectResult } from '@firebase/auth';
 
 import Loading from './components/Loading';
 
@@ -27,8 +22,8 @@ const PageRouter: React.FunctionComponent<PageRouterProps> = props => {
       setLoading(false);
     });
   }, []);
+
   if (loading) {
-    // const result = getRedirectResult(auth);
     return <Loading />;
   }
 
@@ -42,7 +37,6 @@ const PageRouter: React.FunctionComponent<PageRouterProps> = props => {
             exact={route.exact}
             render={(routeProps: RouteComponentProps) => {
               if (route.protected) return <AuthRoute ><route.component {...routeProps} /></AuthRoute>;
-              if (route.index !== undefined) return <route.component {...routeProps} externalIndex={route.index} />;
               return <route.component  {...routeProps} />;
             }}
           />)}

src/firebase/firebase.ts

@@ -1,8 +1,5 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { initializeApp } from 'firebase/app';
-import { GoogleAuthProvider, getAuth, getRedirectResult } from 'firebase/auth';
+import { GoogleAuthProvider, getAuth } from 'firebase/auth';
 import config from './config';
 
 const Firebase = initializeApp(config.firebase);

src/firebase/modules/auth/AuthRoute.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Redirect } from 'react-router-dom';
 import { auth } from '../../firebase';
+
 interface IAuthRouteProps {
   children: React.ReactNode;
   // any other props that come into the component
@@ -10,10 +10,11 @@ const AuthRoute: React.FunctionComponent<IAuthRouteProps> = props => {
   const { children } = props;
 
   // auth.currentUser provides the firebase.User object if authenticated. 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   if (!auth.currentUser) {
-    return <Redirect to="/" />;
+    window.location.href = '/login';
+    return null;
   }
+
   return (
     <div>{children}</div>
   );

src/pages/HomePage.tsx → src/login/LoginPage.tsx

@@ -1,20 +1,14 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import * as React from 'react';
-import { withRouter, Redirect } from 'react-router-dom';
-import * as PropTypes from 'prop-types';
 import { DARK, RED, ThemeProps } from '../components/theme';
 import { StyleProps } from '../style';
-import { styled, withStyleDeep } from 'styletron-react';
+import { styled } from 'styletron-react';
 import { auth, Providers } from '../firebase/firebase';
 import { 
   signInWithEmail, 
-  signInWithSocialMediaRedirect, 
   createUserWithEmail, 
   forgotPassword
 } from '../firebase/modules/auth';
-import { AuthProvider, getRedirectResult, signInWithRedirect } from 'firebase/auth';
+import { AuthProvider, getRedirectResult, signInWithPopup, signInWithRedirect } from 'firebase/auth';
 import Form from '../components/Form';
 import { TabBar } from '../components/TabBar';
 
@@ -24,15 +18,14 @@ import { Fa } from '../components/Fa';
 import { Text } from '../components/Text';
 import { StyledText } from '../util';
 import Button from '../components/Button';
-import PageProps from './interfaces/page.interface';
 import { Validators } from '../util/Validator';
 
-export interface HomePageProps extends ThemeProps,StyleProps,PageProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  history: any;
+export interface LoginPageProps extends ThemeProps, StyleProps {
+  externalIndex?: number;
 }
 
-interface HomePageState {
+interface LoginPageState {
+  initialAuthLoaded: boolean,
   authenticating: boolean,
   loggedIn: boolean;
   index: number;
@@ -130,14 +123,15 @@ const SocialContainer = styled('div', (props: ThemeProps) => ({
   fontSize: '1.4em'
 }));
 
-type Props = HomePageProps;
-type State = HomePageState;
+type Props = LoginPageProps;
+type State = LoginPageState;
 
-class HomePage extends React.Component<Props, State> {
+class LoginPage extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
     this.state = {
+      initialAuthLoaded: false,
       authenticating: false,
       loggedIn: auth.currentUser !== null,
       index: this.props.externalIndex !== undefined ? this.props.externalIndex : 0,
@@ -146,10 +140,6 @@ class HomePage extends React.Component<Props, State> {
     };
   }
 
-  static propTypes = {
-    history: PropTypes.object.isRequired,
-  };
-
   componentDidMount() {
     const a = this.authListener();
   }
@@ -161,9 +151,9 @@ class HomePage extends React.Component<Props, State> {
     }
     auth.onAuthStateChanged((user) => {
       if (user) {
-        this.setState({ loggedIn: true });
+        this.setState({ loggedIn: true, initialAuthLoaded: true });
       } else {
-        this.setState({ loggedIn: false });
+        this.setState({ loggedIn: false, initialAuthLoaded: true });
       }
     });
   };
@@ -232,7 +222,7 @@ class HomePage extends React.Component<Props, State> {
 
   private signInWithSocialMedia_ = async (provider: AuthProvider) => {
     this.setState({ authenticating: true });
-    await signInWithRedirect(auth, provider);
+    await signInWithPopup(auth, provider);
   };
 
   private onTabIndexChange_ = (index: number) => {
@@ -256,10 +246,20 @@ class HomePage extends React.Component<Props, State> {
 
   render() {
     const { props, state } = this;
-    const { className, style, history } = props;
-    const { index, authenticating, loggedIn, forgotPassword, logInFailedMessage } = state;
+    const { className, style } = props;
+    const { initialAuthLoaded, index, authenticating, loggedIn, forgotPassword, logInFailedMessage } = state;
     const theme = DARK;
 
+    if (!initialAuthLoaded) {
+      // Auth initialization is fast, so no need to render anything in the meantime
+      return null;
+    }
+
+    if (loggedIn) {
+      window.location.href = '/dashboard';
+      return null;
+    }
+
     const googleButtonItems = [
       StyledText.component ({
         component: StyledToolIcon,
@@ -281,7 +281,6 @@ class HomePage extends React.Component<Props, State> {
         }
       })
     ];
-    if (loggedIn) return <Redirect push to = '/dashboard' />;
 
     let kiprLogo: JSX.Element;
     switch (theme.foreground) {
@@ -382,4 +381,4 @@ class HomePage extends React.Component<Props, State> {
   }
 }
 
-export default withRouter(HomePage);
+export default LoginPage;

src/login/index.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { DARK } from '../components/theme';
+import LoginPage from './LoginPage';
+
+import { Provider as StyletronProvider } from "styletron-react";
+import { Client as Styletron } from "styletron-engine-atomic";
+
+const reactRoot = document.getElementById('reactRoot');
+
+const engine = new Styletron({ prefix: 'style' });
+
+ReactDom.render(
+  <StyletronProvider value={engine} debugAfterHydration>
+    <LoginPage theme={DARK} />
+  </StyletronProvider>,
+  reactRoot
+);

src/login/login.html.ejs

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="icon" type="image/x-icon" href="/static/favicon.png">
+  <title>KISS IDE Simulator</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">
+  <link href="/static/fontawesome-free-5.15.3-web/css/all.min.css" rel="stylesheet">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      overscroll-behavior: none;
+    }
+
+    html, body {
+      position: relative;
+      margin: 0;
+      padding: 0;
+      background-color: #dcdde1;
+      
+      font-family: 'Roboto', sans-serif;
+      font-weight: 300;
+    }
+  </style>
+</head>
+<body>
+  <div id="reactRoot"></div>
+</body>
+</html>

src/pages/interfaces/route.interface.ts

@@ -1,9 +1,9 @@
+import React from "react";
+
 export default interface IRoute {
   path: string;
   exact: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  component: any;
-  index?: number;
+  component: typeof React.Component;
   name: string; // Used to update page infon and title. 
   protected: boolean; // This will defines if the route is proteted or not
 }

src/pages/routes.ts

@@ -1,25 +1,15 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import IRoute from "./interfaces/route.interface";
 import Dashboard from "./Dashboard";
 import { Root } from '../components/Root';
-import HomePage from "./HomePage";
 import Tutorials from "./Tutorials";
 
 const routes: IRoute[] = [
   {
     path: '/',
     exact: true,
-    component: HomePage,
-    name: 'Home Page',
-    protected: false
-  },
-  {
-    path: '/signup',
-    exact: false,
-    component: HomePage,
-    index: 1,
+    component: Dashboard,
     name: 'Home Page',
-    protected: false
+    protected: true
   },
   {
     path: '/dashboard',