Name: Secure a Next.js App with a Login Screen
Uploaded: 2020-12-29T13:30:20-06:00
Description: 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.

Create a Basic Next.js App

Style a Next.js App Layout with Chakra UI

Secure a Next.js App with a Login Screen

Implement Login in a Next.js App Functionality by Authorizing with Symbl

Store a Token Globally with React Context for Easier Use Anywhere in a Next.js App

Add Video File Input and Preview in a Next.js App

Send a Video File From Next.js for Processing Using Symbl AI Video Async API

Check the Status of Processing for Symbl Job API by Polling with a Custom useInterval Hook

Render Video Transcripts From Symbl Once Processing Is Complete on a Next.js Screen

Use Symbl Conversation API to Get a List of Insights From the Processed Video in Next.js

Create Contextual Video Analysis App with NextJS and Symbl.ai

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.

https://app.egghead.io/api/v1/lessons/react-secure-a-next-js-app-with-a-login-screen/subtitles

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.

Secure a Next.js App with a Login Screen

Share this video with your friends

Course

Create Contextual Video Analysis App with NextJS and Symbl.ai