Secure a Next.js App with a Login Screen
In this video lesson, we will build ProtectedPage component, which will let us secure our Video Processing page behind the Login screen. The reason for doing so is because in order to process the video, we will need an access token from Symbl.
Vladimir Novick: [0:01] Let's create a protected page component to secure our page with the login screen. We'll import React. We'll import a bunch of components from @chakra-ui/react. We'll import the header that's already created.
[0:18] Now, let's create the protected page component. We'll pass children, and we'll define a simple variable is logged in. We'll check whether if user is logged in. If it's not logged in, then we'll render some sort of a loginScreen. Otherwise, we'll render children.
[0:37] Wrap our loginScreen with the sacral couple of inputs. One input will have an AppID. It will be an AppID. The other one will be appSecret. Now, let's switch to our index.js, and wrap our page for the protectedPage component. Instead of using React fragment here, we'll remove the header, and we'll pull the protectedPage.
[1:09] We forgot to add children here, as a second class. As you can see, we have an AppID and appSecret. Let's add the button to do an actual login if you click on it. Let's define our AppID in our state as well as our appSecret.
[1:35] What we are doing here, we're creating connected components for both of our input fields. We'll bring useState from React, and we'll assign onChange handler to our AppID and AppSecret. Let's setApp a value into the AppID. Here, the value will be appSecret. Let's see if that is working. As you can see AppID and appSecret are updated.