fix: add auth flow

package.json

@@ -51,6 +51,7 @@
     "fs-extra": "^9.0.1",
     "history": "^4.10.1",
     "html-webpack-plugin": "4.5.0",
+    "http-proxy-middleware": "^2.0.6",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.0",
     "jest-resolve": "26.6.0",

src/components/Navbar/Navbar.container.ts

@@ -1,14 +1,15 @@
 import { connect } from 'react-redux'
 import { push, getLocation } from 'connected-react-router'
 import { isConnected } from 'decentraland-dapps/dist/modules/wallet/selectors'
-
+import { getIsAuthDappEnabled } from '../../modules/features/selectors'
 import { RootState } from '../../modules/reducer'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './Navbar.types'
 import Navbar from './Navbar'
 
 const mapState = (state: RootState): MapStateProps => ({
   isConnected: isConnected(state),
   pathname: getLocation(state).pathname,
+  isAuthDappEnabled: !!getIsAuthDappEnabled(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({

src/components/Navbar/Navbar.tsx

@@ -5,11 +5,12 @@ import {
 } from 'decentraland-dapps/dist/containers'
 
 import { locations } from '../../modules/locations'
+import { config } from '../../config'
 import { Props } from './Navbar.types'
 import './Navbar.css'
 
 const Navbar = (props: Props) => {
-  const { pathname, onNavigate, isConnected } = props
+  const { pathname, onNavigate, isConnected, isAuthDappEnabled } = props
 
   if (isConnected) {
     props = {
@@ -19,8 +20,16 @@ const Navbar = (props: Props) => {
   }
 
   const handleOnSignIn = useCallback(() => {
+    if (isAuthDappEnabled) {
+      window.location.replace(
+        `${config.get('AUTH_URL')}/login?redirectTo=${
+          window.location.href
+        }`
+      )
+      return
+    }
     onNavigate(locations.signIn())
-  }, [onNavigate])
+  }, [isAuthDappEnabled, onNavigate])
 
   const handleOnClickAccount = useCallback(() => {
     onNavigate(locations.settings())

src/components/Navbar/Navbar.types.ts

@@ -5,9 +5,10 @@ import { NavbarProps } from 'decentraland-ui'
 export type Props = Partial<NavbarProps> & {
   pathname: string
   isConnected: boolean
+  isAuthDappEnabled: boolean
   onNavigate: (path: string) => void
 }
 
-export type MapStateProps = Pick<Props, 'pathname' | 'isConnected'>
+export type MapStateProps = Pick<Props, 'pathname' | 'isConnected' | 'isAuthDappEnabled'>
 export type MapDispatchProps = Pick<Props, 'onNavigate'>
 export type MapDispatch = Dispatch<CallHistoryMethodAction>

src/components/Routes/Routes.tsx

@@ -11,6 +11,7 @@ const Routes = ({ isConnected }: Props) => {
   const APP_ID = config.get('INTERCOM_APP_ID')
 
   if (!isConnected) {
+
     return (
       <>
         <Switch>

src/components/SignInPage/SignInPage.container.ts

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux'
+
+import { RootState } from '../../modules/reducer'
+import { MapStateProps } from './SignInPage.types'
+import SignInPage from './SignInPage'
+import { getIsAuthDappEnabled } from '../../modules/features/selectors'
+import { isConnecting } from 'decentraland-dapps/dist/modules/wallet/selectors'
+
+const mapState = (state: RootState): MapStateProps => ({
+  isAuthDappEnabled: !!getIsAuthDappEnabled(state),
+  isConnecting: isConnecting(state)
+})
+
+export default connect(mapState)(SignInPage)

src/components/SignInPage/SignInPage.tsx

@@ -1,12 +1,22 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { default as SignIn } from 'decentraland-dapps/dist/containers/SignInPage'
 import { Footer } from 'decentraland-dapps/dist/containers'
 import { Page } from 'decentraland-ui'
-
+import { config } from '../../config'
 import { Navbar } from '../Navbar'
+import { Props } from './SignInPage.types'
 import './SignInPage.css'
 
-const SignInPage = () => {
+const SignInPage = ({ isAuthDappEnabled, isConnecting }: Props) => {
+  useEffect(() => {
+    if (isAuthDappEnabled && !isConnecting) {
+      window.location.replace(
+        `${config.get(
+          'AUTH_URL'
+        )}/login?redirectTo=${window.location.href.replace('/sign-in', '')}`
+      )
+    }
+  }, [isAuthDappEnabled, isConnecting])
   return (
     <>
       <Navbar isFullscreen />

src/components/SignInPage/SignInPage.types.ts

@@ -0,0 +1,6 @@
+export type Props = {
+  isAuthDappEnabled: boolean,
+  isConnecting: boolean
+}
+
+export type MapStateProps = Pick<Props, 'isAuthDappEnabled' | 'isConnecting'>

src/components/SignInPage/index.ts

@@ -1,2 +1,2 @@
-import SignInPage from './SignInPage'
+import SignInPage from './SignInPage.container'
 export { SignInPage }

src/config/env/dev.json

@@ -23,5 +23,6 @@
   "INTERCOM_APP_ID": "z0h94kay",
   "DISCORD_URL": "https://dcl.gg/discord",
   "ENVIRONMENT": "development",
-  "SENTRY_DSN": "https://ccdcf39586db1c2f87e7774bb4027767@o4504361728212992.ingest.sentry.io/4505748383727616"
+  "SENTRY_DSN": "https://ccdcf39586db1c2f87e7774bb4027767@o4504361728212992.ingest.sentry.io/4505748383727616",
+  "AUTH_URL": "/auth"
 }

src/config/env/prod.json

@@ -23,5 +23,6 @@
   "INTERCOM_APP_ID": "z0h94kay",
   "DISCORD_URL": "https://dcl.gg/discord",
   "ENVIRONMENT": "production",
-  "SENTRY_DSN": "https://ccdcf39586db1c2f87e7774bb4027767@o4504361728212992.ingest.sentry.io/4505748383727616"
+  "SENTRY_DSN": "https://ccdcf39586db1c2f87e7774bb4027767@o4504361728212992.ingest.sentry.io/4505748383727616",
+  "AUTH_URL": "/auth"
 }

src/config/env/stg.json

@@ -23,5 +23,6 @@
   "INTERCOM_APP_ID": "z0h94kay",
   "DISCORD_URL": "https://dcl.gg/discord",
   "ENVIRONMENT": "staging",
-  "SENTRY_DSN": "https://ccdcf39586db1c2f87e7774bb4027767@o4504361728212992.ingest.sentry.io/4505748383727616"
+  "SENTRY_DSN": "https://ccdcf39586db1c2f87e7774bb4027767@o4504361728212992.ingest.sentry.io/4505748383727616",
+  "AUTH_URL": "/auth"
 }

src/modules/features/selectors.ts

@@ -0,0 +1,11 @@
+import { getIsFeatureEnabled, hasLoadedInitialFlags } from 'decentraland-dapps/dist/modules/features/selectors'
+import { ApplicationName } from 'decentraland-dapps/dist/modules/features/types'
+import { RootState } from '../reducer'
+import { FeatureName } from './types'
+
+export const getIsAuthDappEnabled = (state: RootState) => {
+  if (hasLoadedInitialFlags(state)) {
+    return getIsFeatureEnabled(state, ApplicationName.DAPPS, FeatureName.AUTH_DAPP)
+  }
+  return false
+}

src/modules/features/types.ts

@@ -0,0 +1,3 @@
+export enum FeatureName {
+  AUTH_DAPP = 'auth-dapp'
+}

src/setupProxy.js

@@ -0,0 +1,13 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/auth',
+    createProxyMiddleware({
+      target: 'https://decentraland.zone/auth',
+      changeOrigin: true,
+      followRedirects: true,
+      secure: false
+    })
+  );
+};