Add a new forceOAuthLogin option to appSlice

template-sample-app/template/src/App.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { useRoutes } from 'react-router-dom';
 
 import {
@@ -14,6 +15,7 @@ import { cartoThemeOptions } from '@carto/react/ui';
 
 import routes from './routes';
 import { Header } from 'components/common/Header';
+import Login from 'components/views/login/Login';
 
 let theme = createMuiTheme(cartoThemeOptions);
 theme = responsiveFontSizes(theme, {
@@ -40,19 +42,30 @@ theme = responsiveFontSizes(theme, {
 const useStyles = makeStyles(() => ({
   root: {
     flex: 1,
-    overflow: 'hidden',
+    overflow: 'hidden'
   },
 }));
 
 function App() {
-  const classes = useStyles();
+  const classes = useStyles();  
+  const forceLogin = useSelector((state) => state.app.forceOAuthLogin);
+  const user = useSelector((state) => state.oauth.userInfo);
+
+  const displayLogin = forceLogin && !user;
+
   const routing = useRoutes(routes);
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Grid container direction='column' alignItems='stretch' className={classes.root}>
-        <Header></Header>
-        {routing}
+      <Grid container direction='column' className={classes.root}>
+        {displayLogin ? (
+          <Login />
+        ) : (
+            <>
+              <Header />
+              {routing}
+            </>
+          )}
       </Grid>
     </ThemeProvider>
   );

template-sample-app/template/src/components/views/login/Login.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Button, Container, Grid, makeStyles, Paper, Typography } from "@material-ui/core";
+import { useOAuthLogin } from "@carto/react/oauth";
+import { setTokenAndUserInfoAsync } from "@carto/react/redux";
+
+import { setError } from "config/appSlice";
+
+const useStyles = makeStyles((theme) => ({
+  containerWrapper: {
+    flex: "1 1 auto",
+    display: "flex",
+  },
+  paperForm: {
+    width: theme.spacing(40),
+    height: theme.spacing(32),
+    padding: theme.spacing(4)
+  }
+}));
+
+export default function Login() {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const oauthApp = useSelector((state) => state.oauth.oauthApp);
+
+  const onParamsRefreshed = (oauthParams) => {
+    if (oauthParams.error) {
+      dispatch(setError(`OAuth error: ${oauthParams.error}`));
+    } else {
+      dispatch(setTokenAndUserInfoAsync(oauthParams));
+    }
+  };
+
+  const [handleLogin] = useOAuthLogin(oauthApp, onParamsRefreshed);
+
+  return (
+    <Container className={classes.containerWrapper}>
+      <Grid
+        container
+        spacing={0}
+        direction="column"
+        alignItems="center"
+        justify="center"
+        style={{ minHeight: "100vh" }}
+      >
+
+        <Grid item xs={12}>
+          <Paper
+            variant="elevation"
+            elevation={4}
+            className={classes.paperForm}
+          >
+            <Grid container
+              spacing={4}
+              direction="column"
+              alignItems="center"
+              justify="center">
+              <Grid item>
+                <img src="/logo-primary.svg" alt="CARTO" />
+              </Grid>
+              <Grid item>
+                <Typography>Your credentials are required to login into <strong>CARTO for React app</strong>
+                </Typography>
+              </Grid>
+              <Grid item>
+                <Button color="inherit" variant="outlined" onClick={handleLogin}>
+                  Login
+                </Button>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+
+      </Grid>
+    </Container>
+  );
+}

template-sample-app/template/src/config/appSlice.js

@@ -6,6 +6,7 @@ const slice = createSlice({
     error: null,
     isolineResult: null,
     bottomSheetOpen: false,
+    forceOAuthLogin: false
   },
   reducers: {
     setIsolineResult: (state, action) => {

template-skeleton/template/src/App.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { useRoutes } from 'react-router-dom';
 
 import {
@@ -14,6 +15,7 @@ import { cartoThemeOptions } from '@carto/react/ui';
 
 import routes from './routes';
 import { Header } from 'components/common/Header';
+import Login from 'components/views/login/Login';
 
 let theme = createMuiTheme(cartoThemeOptions);
 theme = responsiveFontSizes(theme, {
@@ -40,19 +42,30 @@ theme = responsiveFontSizes(theme, {
 const useStyles = makeStyles(() => ({
   root: {
     flex: 1,
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
 }));
 
 function App() {
   const classes = useStyles();
+  const forceLogin = useSelector((state) => state.app.forceOAuthLogin);
+  const user = useSelector((state) => state.oauth.userInfo);
+
+  const displayLogin = forceLogin && !user;
+
   const routing = useRoutes(routes);
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Grid container direction='column' className={classes.root}>
-        <Header></Header>
-        {routing}
+        {displayLogin ? (
+          <Login />
+        ) : (
+          <>
+            <Header />
+            {routing}
+          </>
+        )}
       </Grid>
     </ThemeProvider>
   );

template-skeleton/template/src/components/views/login/Login.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  Button,
+  Container,
+  Grid,
+  makeStyles,
+  Paper,
+  Typography,
+} from '@material-ui/core';
+import { useOAuthLogin } from '@carto/react/oauth';
+import { setTokenAndUserInfoAsync } from '@carto/react/redux';
+
+import { setError } from 'config/appSlice';
+
+const useStyles = makeStyles((theme) => ({
+  containerWrapper: {
+    flex: '1 1 auto',
+    display: 'flex',
+  },
+  paperForm: {
+    width: theme.spacing(40),
+    height: theme.spacing(32),
+    padding: theme.spacing(4),
+  },
+}));
+
+export default function Login() {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const oauthApp = useSelector((state) => state.oauth.oauthApp);
+
+  const onParamsRefreshed = (oauthParams) => {
+    if (oauthParams.error) {
+      dispatch(setError(`OAuth error: ${oauthParams.error}`));
+    } else {
+      dispatch(setTokenAndUserInfoAsync(oauthParams));
+    }
+  };
+
+  const [handleLogin] = useOAuthLogin(oauthApp, onParamsRefreshed);
+
+  return (
+    <Container className={classes.containerWrapper}>
+      <Grid
+        container
+        spacing={0}
+        direction='column'
+        alignItems='center'
+        justify='center'
+        style={{ minHeight: '100vh' }}
+      >
+        <Grid item xs={12}>
+          <Paper variant='elevation' elevation={4} className={classes.paperForm}>
+            <Grid
+              container
+              spacing={4}
+              direction='column'
+              alignItems='center'
+              justify='center'
+            >
+              <Grid item>
+                <img src='/logo-primary.svg' alt='CARTO' />
+              </Grid>
+              <Grid item>
+                <Typography>
+                  Your credentials are required to login into{' '}
+                  <strong>CARTO for React app</strong>
+                </Typography>
+              </Grid>
+              <Grid item>
+                <Button color='inherit' variant='outlined' onClick={handleLogin}>
+                  Login
+                </Button>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

template-skeleton/template/src/config/appSlice.js

@@ -5,7 +5,8 @@ const slice = createSlice({
   initialState: {
     error: null,
     isolineResult: null,
-    bottomSheetOpen: false
+    bottomSheetOpen: false,
+    forceOAuthLogin: false,
   },
   reducers: {
     setIsolineResult: (state, action) => {
@@ -16,12 +17,15 @@ const slice = createSlice({
     },
     setBottomSheetOpen: (state, action) => {
       state.bottomSheetOpen = action.payload;
-    }
+    },
   },
 });
 
 export default slice.reducer;
 
 export const setIsolineResult = (payload) => ({ type: 'app/setIsolineResult', payload });
 export const setError = (payload) => ({ type: 'app/setError', payload });
-export const setBottomSheetOpen = (payload) => ({ type: 'app/setBottomSheetOpen', payload });
+export const setBottomSheetOpen = (payload) => ({
+  type: 'app/setBottomSheetOpen',
+  payload,
+});