Hello! I start learning ReactJs. And in one of the test projects, faced a REACT + Firebase authorization problem. The fact is that there are 2 components: app.js, auth.js. The App collects other components, including AUTH. And at the same time, the AUTH component performs authorization through Firebase. And I want to do so that when starting the project, I first went out the authorization page, that is, the AUTH component. And if the user passed authorization, then it opens access to the following pages, and if he did not pass, then besides the authorization page, it cannot go anywhere. I ask you to explain step by step, because I understand the newcomer and do not understand much (I advised to use Context or Redux, but I have not studied them yet. I ask you for solutions in the crutch or with a detailed explanation using Context (I studied a little).

import react from 'react';
Import logo from './logo.svg';
Import './app.css';
Import navbar from './navbar';
Import {ROUTE, SWITCH} from 'react-router-dom'
Import auth from './auth'
Const App = () = & gt; {
 Return (
  & lt; div classname = "app" & gt;
   & lt; navbar / & gt;
   & lt; Switch & gt;
    & LT; ROUTE EXACT PATH = "/ ABOUT" RENDER = {() = & gt; & lt; h1 & gt; about page & lt; / h1 & gt;} / & gt;
    & lt; Route Exact Path = "/ Auth" & gt;
     & lt; auth / & gt;
    & lt; / Route & gt;
    & lt; Route EXACT PATH = "/ Services" render = {() = & gt; & lt; h1 & gt; Services Page & lt; / h1 & gt;} / & gt;
    & lt; ROUTE EXACT PATH = "/ Contacts" render = {() = & gt; & lt; h1 & gt; Contacts Page & LT; / H1 & gt;} / & gt;
    & lt; Route EXACT PATH = "/" & gt;
     & lt; Header classname = "App-Header" & gt;
      & lt; img src = {logo} classname = "app-logo" alt = "logo" / & gt;
     & lt; / Header & gt;
    & lt; / Route & gt;
   & lt; / Switch & gt;
  & lt; / div & gt;
 );
}
EXPORT DEFAULT APP;

and component auth.js

import react from 'react';
Import withfirebaseauth from 'react-with-firebase-auth'
Import * AS Firebase from 'Firebase / App';
Import 'Firebase / Auth';
Import FirebaseConfig from './firebaseConfig';
Const FirebaseApp = Firebase.INITIALIZEApp (FirebaseConfig);
Const FirebaseAppAuth = FirebaseApp.Auth ();
Const providers = {
 GoogleProvider: new firebase.auth.googleauthprovider (),
};
const auth = (props) = & gt; {
  const {
    user,
    SIGNOUT,
    SigninWithGoogle,
  } = Props;
  Return (
    & lt; div style = {{textalign: "center"}} & gt;
      & lt; h1 & gt; auth page & lt; / h1 & gt;
      {
      User.
      . & lt; h1 & gt; hello, {user.displayname} & lt; / h1 & gt;
      : & lt; h1 & gt; Please Sign in. & Lt; / H1 & GT;
      }
      {
      User.
        . & lt; Button onClick = {Signout} & gt; Sign Out & Lt; / Button & GT;
        : & lt; Button onClick = {SigninWithGoogle} & gt; Sign in with Google & Lt; / Button & gt;
      }
    & lt; / div & gt;
  )
}
EXPORT DEFAULT WITHFIREBASEAUTH ({
  providers
  FirebaseAppAuth,
}) (Auth)

Answer 1, Authority 100%

Here is the arutorization in Firebase

// You can register a user so (Returns Promise):
FireBase.Auth (). CreateUserWITHEMAILANDPASSWORD (Email, Password)
// log in to log in (Returns Promise)
Firebase.Auth (). SigninwithemailandPassword (Email, Password);
// Well, subscribe to the event of successful authorization or session loss:
Firebase.Auth (). OnAuthStateChanged (Function (User) {
 if (user) {
   // successfully authorized, the User object contains username, etc.
   this.setstate ({
     ... this.state,
     user,
   });
 }
});

In your case, if you do not use REDUX, the APP component must store the state of the user. When starting, checking should be checked, whether the user is logged at the moment, if so, then no changes, if the login is not, then use the & LT; Redirect to = {} & gt; from ‘React-Router-Dom ‘, Which will redirect it to the AUTH

component