Update App and Test Log In - Thinkster

Outline

In this video, we'll add our NavBar component to the App component and test out logging in and out of the application.

Here's the finished code for App.js:

// src/App.js
import React from 'react';
import NavBar from './components/NavBar';
import { useAuth0 } from './react-auth0-spa';

function App() {
  const { loading } = useAuth0();

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div className="App">
      <header>
        <NavBar />
      </header>
    </div>
  );
}

export default App;

You should now be able to run npm start and navigate to localhost:3000. Click the Log In button and sign up for your new application. You'll get redirected back to the app and see the Log Out button. You can even refresh the page and remain authenticated!

Now, let's add some profile data to our page.

Go Pro to unlock all content & remove ads

I finished! On to the next chapter