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 you will implement Login functionality by using Symbl oauth2 endpoint.
You will be able to retrieve an access token, that you can use to authorize your REST API calls when calling Symbl APIs


https://app.egghead.io/api/v1/lessons/react-implement-login-in-a-next-js-app-functionality-by-authorizing-with-symbl/subtitles

Vladimir Novick: [0:00] To get an appId and appSecret, we need to go to Symbl platform dashboard. We can log in at Symbl Signup and we'll be immediately on this dashboard. We can see our current trial balance for Voice API and Text API. We can also get our credentials.

[0:18] We'll use these credentials to create token using Symbl oauth2 API. We would use token and setToken in our state. Let's switch isLoggedIn from being hardcoded false to being isLoggedIn = token.

[0:38] Let's create a login function. We'll call Symbl endpoint. Passing POST the method, and headers will be Content-Type of application/json. We'll also need to set up mode cors. We'll pass body of appId and appSecret, as well as type application.

[1:28] Then we'll parse the result json and set out token to be accessToken returned from Symbl endpoint. The endpoint that we need to use to authorize the symbol is api.symbl.ai/oauth2/token:generate. Let's log token to the console. Also add onClick handler for our button to do the login.

[2:11] Let's copy our appID, copy the appSecret, log in. As you can see, I have the access token here, and we also have the video processing app rendered.

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

Share this video with your friends

Course

Create Contextual Video Analysis App with NextJS and Symbl.ai