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

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.