I installed and added the Auth0 React SDK v1.9.0 in my create-react-app but nothing displays on the browser when I try to run it locally with “npm start” or deploy it to Netlify and I don’t get any error in the terminal. My current node version is 14.17.3.
index.js
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './containers/App';
import store from './store';
import { ThemeProvider } from 'styled-components';
import theme from './utils/theme';
import GlobalStyle from './utils/globals';
import Auth0ProviderWithHistory from './Auth/AuthProvider';
import { BrowserRouter as Router } from 'react-router-dom';
import '../node_modules/react-modal-video/scss/modal-video.scss';
import '../node_modules/slick-carousel/slick/slick.css';
import '../node_modules/slick-carousel/slick/slick-theme.css';
ReactDOM.render(
<Auth0ProviderWithHistory>
<Provider store={store}>
<ThemeProvider ThemeProvider theme={theme}>
<Fragment>
<Router>
<App />
</Router>
<GlobalStyle />
</Fragment>
</ThemeProvider>
</Provider>
</Auth0ProviderWithHistory>,
document.getElementById('root')
);
App.js
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { Switch, Redirect } from 'react-router-dom';
import history from '../history';
import { connect } from 'react-redux';
import { init } from '../actions';
import ReactGA from 'react-ga';
import ProtectedRoute from '../Auth/ProtectedRoute';
import { useAuth0 } from '@auth0/auth0-react';
import Sidebar from './Sidebar';
import MenuMobile from './MenuMobile';
import Discover from './Discover';
import Genre from './Genre';
import Search from './Search';
import Movie from './Movie';
import Person from './Person';
import ShowError from './ShowError';
import NotFound from '../components/NotFound';
import SearchBar from '../components/SearchBar';
import Loader from '../components/Loader';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import {
faArrowLeft,
faArrowRight,
faHome,
faCalendar,
faPoll,
faHeart,
faDotCircle,
faStar as fasFaStar,
faSearch,
faChevronRight,
faChevronLeft,
faLink,
faPlay,
} from '@fortawesome/free-solid-svg-icons';
import { faStar as farFaStar } from '@fortawesome/free-regular-svg-icons';
library.add(
fab,
faArrowLeft,
faArrowRight,
faHome,
faCalendar,
faPoll,
faHeart,
faDotCircle,
fasFaStar,
farFaStar,
faSearch,
faChevronRight,
faChevronLeft,
faLink,
faPlay
);
const MainWrapper = styled.div`
display: flex;
flex-direction: ${props => (props.isMobile ? 'column' : 'row')};
position: relative;
align-items: flex-start;
height: 100%;
width: 100%;
user-select: none;
`;
const ContentWrapper = styled.div`
width: 100%;
height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6rem 4rem;
@media ${props => props.theme.mediaQueries.larger} {
padding: 6rem 3rem;
}
@media ${props => props.theme.mediaQueries.large} {
padding: 4rem 2rem;
}
`;
const SearhBarWrapper = styled.div`
position: absolute;
top: 0;
right: 0;
padding: 2rem;
`;
ReactGA.initialize('UA-137885307-1');
ReactGA.pageview(window.location.pathname + window.location.search);
const App = ({ init, isLoad }) => {
useEffect(() => {
init();
}, [init]);
const [isMobile, setisMobile] = useState(null);
// Set amount of items to show on slider based on the width of the element
const changeMobile = () => {
window.matchMedia('(max-width: 80em)').matches
? setisMobile(true)
: setisMobile(false);
};
useEffect(() => {
changeMobile();
window.addEventListener('resize', changeMobile);
return () => window.removeEventListener('resize', changeMobile);
}, []);
const { isLoading } = useAuth0();
if (isLoading) {
return <Loader />;
}
return (
<React.Fragment>
<MainWrapper isMobile={isMobile}>
{isMobile ? (
<MenuMobile />
) : (
<>
<Sidebar />
<SearhBarWrapper>
<SearchBar />
</SearhBarWrapper>
</>
)}
<ContentWrapper>
<Switch>
<ProtectedRoute
path={process.env.PUBLIC_URL + '/'}
exact
render={() => (
<Redirect
from={process.env.PUBLIC_URL + '/'}
to={process.env.PUBLIC_URL + '/discover/Popular'}
/>
)}
/>
<ProtectedRoute
path={process.env.PUBLIC_URL + '/genres/:name'}
exact
component={Genre}
/>
<ProtectedRoute
path={process.env.PUBLIC_URL + '/discover/:name'}
exact
component={Discover}
/>
<ProtectedRoute
path={process.env.PUBLIC_URL + '/search/:query'}
exact
component={Search}
/>
<ProtectedRoute
path={process.env.PUBLIC_URL + '/movie/:id'}
exact
component={Movie}
/>
<ProtectedRoute
path={process.env.PUBLIC_URL + '/person/:id'}
exact
component={Person}
/>
<ProtectedRoute
path="/404"
component={() => (
<NotFound title="Upps!" subtitle={`This doesn't exist...`} />
)}
/>
<ProtectedRoute
path={process.env.PUBLIC_URL + '/error'}
component={ShowError}
/>
<ProtectedRoute
component={() => (
<NotFound title="Upps!" subtitle={`This doesn't exist...`} />
)}
/>
</Switch>
</ContentWrapper>
</MainWrapper>
</React.Fragment>
);
};
const mapStateToProps = ({ geral }) => {
return { isLoading: geral.loading };
};
export default connect(
mapStateToProps,
{ init }
)(App);
AuthProviderWithHistory
import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';
const Auth0ProviderWithHistory = ( { children } ) => {
const history = useHistory();
const onRedirectCallback = ( appState ) => {
history.push( appState?.returnTo || window.location.pathname );
};
return (
<Auth0Provider
domain="*************************"
clientId="*************************"
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
>
{children}
</Auth0Provider>
);
};
export default Auth0ProviderWithHistory;
ProtectedRoute.js
import React from 'react';
import { Route } from 'react-router-dom';
import { withAuthenticationRequired } from '@auth0/auth0-react';
import Loader from '../components/Loader';
const ProtectedRoute = ({ component, ...args }) => (
<Route
component={withAuthenticationRequired(component, {
onRedirecting: () => <Loader />,
})}
{...args}
/>
);
export default ProtectedRoute;