title
React Authentication App With Okta

description
In this video we will build a React app that uses authentication from Otka which is a user management system that can be used across multiple apps built on multiple languages/frameworks Code: https://github.com/bradtraversy/react_otka_auth Otka Developers: https://developer.okta.com/ Documentation Page: https://developer.okta.com/code/react/okta_react_sign-in_widget 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia The Developer Hangout: Public Discord Server https://discord.gg/developers

detail
{'title': 'React Authentication App With Okta', 'heatmap': [{'end': 406.735, 'start': 268.162, 'weight': 0.772}, {'end': 515.929, 'start': 466.336, 'weight': 0.709}, {'end': 1256.125, 'start': 1217.13, 'weight': 0.729}, {'end': 1330.985, 'start': 1284.056, 'weight': 0.745}, {'end': 1596.291, 'start': 1423.999, 'weight': 0.706}, {'end': 1692.246, 'start': 1621.129, 'weight': 0.924}], 'summary': 'Learn to build a react app with okta authentication, including showcasing a staff portal, setting up navigation, implementing user authentication, customizing the sign-in widget, and creating secure routes for protection.', 'chapters': [{'end': 270.963, 'segs': [{'end': 61.399, 'src': 'embed', 'start': 30.809, 'weight': 0, 'content': [{'end': 33.152, 'text': "It's compatible with like 10 different languages.", 'start': 30.809, 'duration': 2.343}, {'end': 38.393, 'text': "So what we'll be building is this react app called Acme Staff Portal.", 'start': 33.812, 'duration': 4.581}, {'end': 42.494, 'text': "And the idea here is that you're a business owner and you have staff members,", 'start': 38.753, 'duration': 3.741}, {'end': 48.096, 'text': 'that you want to be able to access certain parts of the website or application.', 'start': 42.494, 'duration': 5.602}, {'end': 53.637, 'text': "And it's very easy to protect these these routes or these these paths.", 'start': 48.796, 'duration': 4.841}, {'end': 56.098, 'text': 'So you can see I have a staff area here.', 'start': 54.037, 'duration': 2.061}, {'end': 61.399, 'text': "If I click on it shows me this nice sign in widget, which is actually a package we'll be installing.", 'start': 56.138, 'duration': 5.261}], 'summary': 'Creating a multilingual staff portal app with easy access control.', 'duration': 30.59, 'max_score': 30.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg30809.jpg'}, {'end': 107.029, 'src': 'embed', 'start': 81.76, 'weight': 2, 'content': [{'end': 87.922, 'text': "I'm actually plucking the name and the email from the token, because once we authenticate, we get this token in local storage,", 'start': 81.76, 'duration': 6.162}, {'end': 89.963, 'text': 'this Okta token storage.', 'start': 87.922, 'duration': 2.041}, {'end': 97.686, 'text': "And then if we look at ID token, there's a bunch of stuff here, but there's a claims object, and this has the email of the user.", 'start': 90.543, 'duration': 7.143}, {'end': 100.327, 'text': 'And it has the name of the user.', 'start': 98.406, 'duration': 1.921}, {'end': 102.447, 'text': 'So I took that out and put that in the page.', 'start': 100.367, 'duration': 2.08}, {'end': 107.029, 'text': "And if I go back to home, you'll see that the login button is now a log out button.", 'start': 102.907, 'duration': 4.122}], 'summary': "Extracted user's name and email from okta token for authentication, updating the page and login button.", 'duration': 25.269, 'max_score': 81.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg81760.jpg'}, {'end': 211.499, 'src': 'embed', 'start': 182.986, 'weight': 4, 'content': [{'end': 187.749, 'text': 'so the first thing you want to do is is create an account at developer.octa.com.', 'start': 182.986, 'duration': 4.763}, {'end': 195.233, 'text': "okay, make sure it's the developer subdomain and just go ahead and click sign up and it'll just take you through a process where you fill in this information.", 'start': 187.749, 'duration': 7.484}, {'end': 204.198, 'text': "you'll get an activation email, follow the link in that email and log in and you should see something like this okay, so this is your octa dashboard.", 'start': 195.233, 'duration': 8.965}, {'end': 211.499, 'text': "Now I'm not going to go through all the areas of this dashboard, just basically the ones that we need.", 'start': 205.258, 'duration': 6.241}], 'summary': 'Create an account at developer.octa.com, follow activation email, access dashboard.', 'duration': 28.513, 'max_score': 182.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg182986.jpg'}, {'end': 256.459, 'src': 'embed', 'start': 232.325, 'weight': 3, 'content': [{'end': 239.869, 'text': "So your total users, the authentications, failed logins, gives you a nice little system log of everything that's happened.", 'start': 232.325, 'duration': 7.544}, {'end': 245.393, 'text': 'If we click on, and by the way, these are all the different platforms that you can use Okta with.', 'start': 240.83, 'duration': 4.563}, {'end': 251.236, 'text': 'So React, PHP, Node, .NET, Java, iOS and Android, and Angular.', 'start': 245.513, 'duration': 5.723}, {'end': 256.459, 'text': 'So if we go to users, this will show you a list of all of your users.', 'start': 252.576, 'duration': 3.883}], 'summary': 'Okta provides authentication for various platforms including react, php, node, .net, java, ios, and android, enabling tracking of total users and failed logins.', 'duration': 24.134, 'max_score': 232.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg232325.jpg'}], 'start': 7.068, 'title': 'Using okta for react app authentication', 'summary': 'Covers building a react app with okta authentication, showcasing a staff portal, and extracting user info. it also demonstrates adding routes, accessing okta dashboard metrics, and creating an account on developer.okta.com.', 'chapters': [{'end': 102.447, 'start': 7.068, 'title': 'Building react app with okta authentication', 'summary': 'Introduces building a react application using okta for authentication, allowing users to access certain parts of the application, showcasing a staff portal with authentication and authorization, and extracting user information from the okta token.', 'duration': 95.379, 'highlights': ['The React application uses Okta for authentication and authorization, allowing access to specific areas of the application. It showcases the Acme Staff Portal as an example.', 'The Okta platform is compatible with 10 different languages, providing flexibility and versatility for developers building applications on different languages and platforms.', 'The authentication process involves extracting user information, such as name and email, from the Okta token stored in local storage.']}, {'end': 270.963, 'start': 102.907, 'title': 'Implementing okta for user authentication', 'summary': 'Demonstrates how to use okta for user authentication, including adding routes and protecting them, accessing the okta dashboard to view metrics and user information, and creating an account on developer.octa.com to get started.', 'duration': 168.056, 'highlights': ['The dashboard on the back end of Okta provides metrics and a log of user activities, allowing developers to see user base across different platforms and manage user applications, such as assigning applications to specific users. Accessing the Okta dashboard provides developers with a log of user activities, metrics on user base across different platforms, and the ability to manage user applications.', 'Developers are guided to create an account on developer.octa.com, complete the signup process, receive an activation email, and log in to the Octa dashboard to access necessary information for application integration. Guidance is provided on creating an account on developer.octa.com, completing the signup process, and accessing the necessary information for application integration.', 'The org URL for Okta is highlighted as a crucial piece of information required for application integration, along with the availability of metrics on total users, authentications, and failed logins within the Okta dashboard. Emphasis is placed on the org URL for Okta and the availability of metrics on total users, authentications, and failed logins within the Okta dashboard.']}], 'duration': 263.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg7068.jpg', 'highlights': ['The React application uses Okta for authentication and authorization, showcasing the Acme Staff Portal.', 'Okta platform is compatible with 10 different languages, providing flexibility for developers.', 'The authentication process involves extracting user information from the Okta token stored in local storage.', 'Accessing the Okta dashboard provides developers with a log of user activities and metrics on user base across different platforms.', 'Developers are guided to create an account on developer.octa.com and access necessary information for application integration.', 'Emphasis is placed on the org URL for Okta and the availability of metrics on total users, authentications, and failed logins within the Okta dashboard.']}, {'end': 821.333, 'segs': [{'end': 320.458, 'src': 'embed', 'start': 291.049, 'weight': 0, 'content': [{'end': 295.27, 'text': "okay, so we want to register our react application that we're about to build.", 'start': 291.049, 'duration': 4.221}, {'end': 301.132, 'text': 'so if we click on the applications link and click add application, we want to choose a single page app.', 'start': 295.27, 'duration': 5.862}, {'end': 301.772, 'text': 'okay, you can see.', 'start': 301.132, 'duration': 0.64}, {'end': 303.253, 'text': 'it says angular, react etc.', 'start': 301.772, 'duration': 1.481}, {'end': 306.637, 'text': 'So we want to choose that and we want to name it.', 'start': 304.033, 'duration': 2.604}, {'end': 311.265, 'text': "So I'm going to call it Acme Staff Portal.", 'start': 306.878, 'duration': 4.387}, {'end': 315.876, 'text': 'And we want to change the number here of the ports.', 'start': 312.814, 'duration': 3.062}, {'end': 320.458, 'text': "We're using Create React App, which has a dev server that runs on port 3000.", 'start': 316.096, 'duration': 4.362}], 'summary': 'Register a single-page react app named acme staff portal on port 3000.', 'duration': 29.409, 'max_score': 291.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg291049.jpg'}, {'end': 464.955, 'src': 'embed', 'start': 433.198, 'weight': 1, 'content': [{'end': 434.559, 'text': "So let's say react.", 'start': 433.198, 'duration': 1.361}, {'end': 440.008, 'text': "So we're using version four of the router.", 'start': 436.407, 'duration': 3.601}, {'end': 442.849, 'text': 'We also need two Okta packages.', 'start': 440.888, 'duration': 1.961}, {'end': 447.11, 'text': 'One is Okta React, which is the main package to kind of bind them together.', 'start': 442.969, 'duration': 4.141}, {'end': 449.91, 'text': 'And then we also want the sign in widget package,', 'start': 447.13, 'duration': 2.78}, {'end': 455.732, 'text': 'which allows us to have that really nice looking sign in form and all the functionality that it comes with.', 'start': 449.91, 'duration': 5.822}, {'end': 464.955, 'text': 'So this is going to be at you want to use the at symbol Okta slash Okta dash react.', 'start': 456.372, 'duration': 8.583}], 'summary': 'Using react version 4 router, integrating okta react and sign in widget packages for enhanced functionality.', 'duration': 31.757, 'max_score': 433.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg433198.jpg'}, {'end': 517.791, 'src': 'heatmap', 'start': 466.336, 'weight': 2, 'content': [{'end': 474.078, 'text': 'And then we want at Okta slash Okta dash sign in dash widget.', 'start': 466.336, 'duration': 7.742}, {'end': 476.98, 'text': "OK, so we'll run that.", 'start': 474.098, 'duration': 2.882}, {'end': 479.52, 'text': 'And those are the three dependencies we need.', 'start': 477.76, 'duration': 1.76}, {'end': 483.802, 'text': "Let's look at our package dot JSON file and they should get added as dependency.", 'start': 479.56, 'duration': 4.242}, {'end': 489.756, 'text': 'okay, so there we go.', 'start': 487.395, 'duration': 2.361}, {'end': 490.677, 'text': 'that should be all set.', 'start': 489.756, 'duration': 0.921}, {'end': 493.038, 'text': "we'll close that file up now.", 'start': 490.677, 'duration': 2.361}, {'end': 498.48, 'text': 'what we want to do is start to create our components.', 'start': 493.038, 'duration': 5.442}, {'end': 502.382, 'text': 'before we do that, though, i do want to use bootstrap.', 'start': 498.48, 'duration': 3.902}, {'end': 504.283, 'text': "so there's a few ways we could use it.", 'start': 502.382, 'duration': 1.901}, {'end': 509.626, 'text': "we could install it as a package, but i'm going to take the easy way out and use the cdn.", 'start': 504.283, 'duration': 5.343}, {'end': 515.929, 'text': "so let's go to getbootstrap.com and go to get started, and just let's grab the css file.", 'start': 509.626, 'duration': 6.303}, {'end': 517.791, 'text': "okay, so i'm going to grab that.", 'start': 515.929, 'duration': 1.862}], 'summary': 'Setting up okta sign-in widget and incorporating bootstrap using cdn.', 'duration': 27.114, 'max_score': 466.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg466336.jpg'}, {'end': 605.02, 'src': 'embed', 'start': 571.656, 'weight': 4, 'content': [{'end': 572.957, 'text': 'So that should be it for this page.', 'start': 571.656, 'duration': 1.301}, {'end': 574.458, 'text': "We don't have to touch this anymore.", 'start': 572.977, 'duration': 1.481}, {'end': 584.787, 'text': "And now if we were to go to our application, you'll see that some things have changed, such as the font and so on.", 'start': 574.939, 'duration': 9.848}, {'end': 586.609, 'text': 'So it is using Bootstrap.', 'start': 585.248, 'duration': 1.361}, {'end': 590.817, 'text': "Now, I'm going to clean this up a little bit.", 'start': 588.436, 'duration': 2.381}, {'end': 595.658, 'text': "We don't need the logo, so let's get rid of logo.svg.", 'start': 591.117, 'duration': 4.541}, {'end': 600.119, 'text': "I'm not a fan of just keeping things around that we're not going to use.", 'start': 595.678, 'duration': 4.441}, {'end': 605.02, 'text': "And the app.js will remove the reference to the logo, so we'll get rid of that.", 'start': 600.799, 'duration': 4.221}], 'summary': 'App page updated with bootstrap, logo removed, and app.js modified.', 'duration': 33.364, 'max_score': 571.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg571656.jpg'}, {'end': 680.274, 'src': 'embed', 'start': 646.503, 'weight': 3, 'content': [{'end': 649.608, 'text': "And in the source, we're going to create a folder called components.", 'start': 646.503, 'duration': 3.105}, {'end': 656.553, 'text': 'And we might as well create all the different folders and files we need in here.', 'start': 652.15, 'duration': 4.403}, {'end': 659.955, 'text': 'So one folder I want is called layout.', 'start': 657.153, 'duration': 2.802}, {'end': 665.658, 'text': 'So this is where things like the navbar will go if you wanted a footer or a sidebar, stuff like that.', 'start': 660.595, 'duration': 5.063}, {'end': 669.62, 'text': "But all we're going to need in here for this application is a navbar.", 'start': 666.298, 'duration': 3.322}, {'end': 671.441, 'text': 'So we want navbar.js.', 'start': 669.66, 'duration': 1.781}, {'end': 680.274, 'text': "Okay, another folder that I want in components is off, and that's where anything to do with the authentication will go with Okta.", 'start': 672.327, 'duration': 7.947}], 'summary': "Creating folders and files for components, including 'layout' and 'auth', with 'navbar.js' and okta authentication.", 'duration': 33.771, 'max_score': 646.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg646503.jpg'}], 'start': 270.963, 'title': 'Setting up okta with react app and cleaning up application and creating components', 'summary': "Covers registering a react application with okta, configuring the application's settings, installing necessary dependencies, integrating bootstrap using a cdn, cleaning up the application by removing unused files and code, creating a components folder with subfolders for layout, auth, and pages, and starting with creating a navbar component using react.", 'chapters': [{'end': 571.115, 'start': 270.963, 'title': 'Setting up okta with react app', 'summary': "Covers registering a react application with okta, configuring the application's settings, installing necessary dependencies, and integrating bootstrap using a cdn.", 'duration': 300.152, 'highlights': ["Registering the React application with Okta The user demonstrates how to register a React application named 'Acme Staff Portal' with Okta and configure its settings, including changing the ports and login redirect URI.", 'Installing necessary dependencies The user explains the process of installing React Router, Okta React, and Okta Sign-In Widget packages using npm to enable route creation, route protection, and a sleek sign-in form.', 'Integrating Bootstrap using a CDN The user shows how to integrate Bootstrap into the React application by adding the Bootstrap CSS file and JavaScript references from the CDN to the index.html file in the public folder.', 'Creating React components and utilizing VS Code extensions The user mentions the intention to create React components and utilize Bootstrap, while also recommending the use of the Prettier extension for auto formatting in VS Code.']}, {'end': 821.333, 'start': 571.656, 'title': 'Cleaning up application and creating components', 'summary': 'Covers cleaning up the application by removing unused files and code, creating a components folder with subfolders for layout, auth, and pages, and then starting with creating a navbar component using react.', 'duration': 249.677, 'highlights': ["Creating a components folder with subfolders for layout, auth, and pages The chapter focuses on creating a components folder in the source, with subfolders for layout, auth, and pages to organize the application's components effectively.", 'Removing unused files and code to clean up the application The transcript discusses the removal of unnecessary files and code, such as logo.svg and app.css, to declutter the application and improve maintainability.', 'Starting with creating a navbar component using React The chapter introduces the process of creating a navbar component using React, highlighting the approach of using class-based components for potential future enhancements.']}], 'duration': 550.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg270963.jpg', 'highlights': ["Registering the React application with Okta The user demonstrates how to register a React application named 'Acme Staff Portal' with Okta and configure its settings, including changing the ports and login redirect URI.", 'Installing necessary dependencies The user explains the process of installing React Router, Okta React, and Okta Sign-In Widget packages using npm to enable route creation, route protection, and a sleek sign-in form.', 'Integrating Bootstrap using a CDN The user shows how to integrate Bootstrap into the React application by adding the Bootstrap CSS file and JavaScript references from the CDN to the index.html file in the public folder.', "Creating a components folder with subfolders for layout, auth, and pages The chapter focuses on creating a components folder in the source, with subfolders for layout, auth, and pages to organize the application's components effectively.", 'Removing unused files and code to clean up the application The transcript discusses the removal of unnecessary files and code, such as logo.svg and app.css, to declutter the application and improve maintainability.']}, {'end': 1492.774, 'segs': [{'end': 1019.116, 'src': 'embed', 'start': 991.482, 'weight': 0, 'content': [{'end': 995.884, 'text': "So basically it's saying you should not use a link outside a router.", 'start': 991.482, 'duration': 4.402}, {'end': 1002.488, 'text': "So we're using the link component that comes with react router, but we haven't set up our actual router.", 'start': 996.344, 'duration': 6.144}, {'end': 1007.19, 'text': "We're just still displaying just a div on it in our main app JS.", 'start': 1002.548, 'duration': 4.642}, {'end': 1010.472, 'text': 'We just have a div with the nav bar and this H1.', 'start': 1007.23, 'duration': 3.242}, {'end': 1014.294, 'text': 'So we actually need to set up the router, which is, which is pretty easy.', 'start': 1010.552, 'duration': 3.742}, {'end': 1019.116, 'text': 'Um, so to do that, we need to bring some stuff in from the router.', 'start': 1015.234, 'duration': 3.882}], 'summary': 'Use react router link component, set up router for app display.', 'duration': 27.634, 'max_score': 991.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg991482.jpg'}, {'end': 1147.047, 'src': 'embed', 'start': 1113.107, 'weight': 1, 'content': [{'end': 1117.891, 'text': 'So this will be slash staff and the component will be staff.', 'start': 1113.107, 'duration': 4.784}, {'end': 1124.896, 'text': "Now, right now, react does or the component doesn't know what home and staff is.", 'start': 1119.552, 'duration': 5.344}, {'end': 1126.757, 'text': 'So we need to actually bring those in.', 'start': 1124.956, 'duration': 1.801}, {'end': 1129.679, 'text': "So let's go up here and let's bring those in.", 'start': 1126.817, 'duration': 2.862}, {'end': 1133.542, 'text': "So we have home and that's going to be in.", 'start': 1129.779, 'duration': 3.763}, {'end': 1135.003, 'text': 'Remember, we put that in pages.', 'start': 1133.562, 'duration': 1.441}, {'end': 1147.047, 'text': "pages folder and let's say home and then this one here is gonna be staff and also in the pages folder.", 'start': 1136.803, 'duration': 10.244}], 'summary': 'React component slash staff needs to import home and staff from the pages folder.', 'duration': 33.94, 'max_score': 1113.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg1113107.jpg'}, {'end': 1256.125, 'src': 'heatmap', 'start': 1207.039, 'weight': 4, 'content': [{'end': 1212.023, 'text': "Now, one thing I want to do is I want to put the main content in a container so it doesn't go away over here.", 'start': 1207.039, 'duration': 4.984}, {'end': 1213.524, 'text': 'I want it to end like right here.', 'start': 1212.043, 'duration': 1.481}, {'end': 1215.385, 'text': 'So in app.js..', 'start': 1214.304, 'duration': 1.081}, {'end': 1225.499, 'text': "Let's wrap our routes, not the navbar, we don't want the navbar in the container, but let's wrap our routes inside of a container div.", 'start': 1217.13, 'duration': 8.369}, {'end': 1230.393, 'text': "Okay, so we'll go down here and end that.", 'start': 1227.952, 'duration': 2.441}, {'end': 1234.495, 'text': "And now if we look, now it's in the middle.", 'start': 1231.834, 'duration': 2.661}, {'end': 1241.678, 'text': 'And if I click staff, we can now direct, we can get directed to the staff component, our staff page.', 'start': 1234.895, 'duration': 6.783}, {'end': 1243.318, 'text': 'All right, good.', 'start': 1242.798, 'duration': 0.52}, {'end': 1245.479, 'text': "So let's see.", 'start': 1244.179, 'duration': 1.3}, {'end': 1249.841, 'text': 'I just want to quickly initialize a Git repository and just commit this.', 'start': 1245.559, 'duration': 4.282}, {'end': 1252.042, 'text': "So I'm just going to, and you guys don't have to do this.", 'start': 1249.921, 'duration': 2.121}, {'end': 1256.125, 'text': "but let's see, let's go down here and clear this up.", 'start': 1252.922, 'duration': 3.203}], 'summary': 'In app.js, routes are wrapped inside a container div, making the content centered. the staff page is accessible, and a git repository is initialized and committed.', 'duration': 27.456, 'max_score': 1207.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg1207039.jpg'}, {'end': 1330.985, 'src': 'heatmap', 'start': 1284.056, 'weight': 0.745, 'content': [{'end': 1286.437, 'text': 'All right.', 'start': 1284.056, 'duration': 2.381}, {'end': 1293.138, 'text': 'So next thing we want to do here is We want to start to implement Okta.', 'start': 1286.437, 'duration': 6.701}, {'end': 1299.82, 'text': "so I'm gonna go to that documentation page, Which is this here, and I'll put the link in the description.", 'start': 1293.138, 'duration': 6.682}, {'end': 1302.761, 'text': "but we're gonna be using a ton of this code.", 'start': 1299.82, 'duration': 2.941}, {'end': 1306.837, 'text': 'Okay, so I want to start with AppJS.', 'start': 1302.761, 'duration': 4.076}, {'end': 1312.04, 'text': "And like most documentation, it's laid out in a weird way.", 'start': 1307.478, 'duration': 4.562}, {'end': 1318.184, 'text': "It doesn't give you a nice put-together tutorial to build something.", 'start': 1312.201, 'duration': 5.983}, {'end': 1327.61, 'text': "And that's kind of what I try to do with my videos is take complicated, vague documentation and show you a way to actually build a project with it.", 'start': 1318.304, 'duration': 9.306}, {'end': 1330.985, 'text': 'But what I want to look at here is their app.js.', 'start': 1328.223, 'duration': 2.762}], 'summary': 'The transcript discusses the plan to implement okta, referring to specific documentation and code usage.', 'duration': 46.929, 'max_score': 1284.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg1284056.jpg'}, {'end': 1404.684, 'src': 'embed', 'start': 1341.741, 'weight': 2, 'content': [{'end': 1350.244, 'text': 'We need to wrap everything that is inside the router in this security tag or this security component.', 'start': 1341.741, 'duration': 8.503}, {'end': 1357.727, 'text': 'And then we need to apply a bunch of properties to it, including our issuer, which is basically our domain.', 'start': 1350.344, 'duration': 7.383}, {'end': 1359.827, 'text': 'our Okta domain slash.', 'start': 1357.727, 'duration': 2.1}, {'end': 1361.328, 'text': 'OAuth2 slash default.', 'start': 1359.827, 'duration': 1.501}, {'end': 1363.869, 'text': 'We also need the client ID and so on.', 'start': 1361.668, 'duration': 2.201}, {'end': 1369.331, 'text': "So let's go ahead and let's bring in that stuff into App.js.", 'start': 1364.829, 'duration': 4.502}, {'end': 1377.118, 'text': "So we're going to go up to the top right under where we have the router and let's import some stuff.", 'start': 1370.675, 'duration': 6.443}, {'end': 1378.319, 'text': "So we'll say import.", 'start': 1377.138, 'duration': 1.181}, {'end': 1382.14, 'text': 'And we want security.', 'start': 1380.82, 'duration': 1.32}, {'end': 1386.062, 'text': 'We want secure route.', 'start': 1384.361, 'duration': 1.701}, {'end': 1396.367, 'text': 'OK, secure route is used to just to do just that, create secure routes that are protected and then implicit callback.', 'start': 1387.843, 'duration': 8.524}, {'end': 1404.684, 'text': 'And those are going to all be from the at Okta react package.', 'start': 1398.94, 'duration': 5.744}], 'summary': 'Wrap router contents in security tag, apply properties, import okta react package into app.js', 'duration': 62.943, 'max_score': 1341.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg1341741.jpg'}], 'start': 822.213, 'title': 'React navigation and okta package implementation', 'summary': 'Covers setting up navigation and routing in react using react router, creating responsive navigation and routing system, and implementing okta react package for creating secure routes for protection.', 'chapters': [{'end': 1234.495, 'start': 822.213, 'title': 'Setting up navigation and routing in react', 'summary': 'Covers setting up a navigation bar with links using the react router, including importing components, setting up routes, and creating pages for home and staff, aimed at achieving a responsive navigation and routing system.', 'duration': 412.282, 'highlights': ['Setting up a navigation bar with links using the React Router The chapter extensively covers setting up a navigation bar with links using the React Router to enable navigation between different pages.', "Importing components and using link instead of a tags for navigation The transcript explains the process of importing components and using the 'link' component instead of 'a tags' for navigation within the navigation bar.", 'Defining routes and components for home and staff pages There is a detailed explanation of defining routes and components for the home and staff pages within the React Router, aiming to establish a structured routing system.', 'Creating pages for home and staff The chapter includes creating pages for home and staff within the application, laying the foundation for further development and content addition.', 'Wrapping routes inside a container div for a responsive layout The transcript suggests wrapping routes inside a container div to achieve a responsive layout, ensuring a structured and organized display of content.']}, {'end': 1492.774, 'start': 1234.895, 'title': 'Implementing okta react package', 'summary': 'Discusses the process of initializing a git repository, implementing okta react package, and configuring the necessary properties in app.js to create secure routes for protection.', 'duration': 257.879, 'highlights': ["Initializing a Git repository by using 'git init', 'git add all', and 'git commit' The speaker briefly initializes a Git repository using 'git init', 'git add all', and 'git commit'.", 'Importing and using security, secure route, and implicit callback from the Okta React package in App.js The speaker explains the process of importing and using security, secure route, and implicit callback from the Okta React package in App.js to create secure routes.', 'Configuring properties such as issuer and client ID in the security tag in App.js for securing routes The speaker demonstrates the configuration of properties like issuer and client ID in the security tag in App.js for securing routes using Okta React package.']}], 'duration': 670.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg822213.jpg', 'highlights': ['Covers setting up a navigation bar with links using the React Router to enable navigation between different pages.', 'Defining routes and components for home and staff pages within the React Router, aiming to establish a structured routing system.', 'Importing and using security, secure route, and implicit callback from the Okta React package in App.js to create secure routes.', 'Configuring properties such as issuer and client ID in the security tag in App.js for securing routes using Okta React package.', 'Wrapping routes inside a container div to achieve a responsive layout, ensuring a structured and organized display of content.']}, {'end': 2139.115, 'segs': [{'end': 1692.246, 'src': 'heatmap', 'start': 1515.946, 'weight': 0, 'content': [{'end': 1524.348, 'text': "basically, we need a function that's going to redirect to somewhere if they're not authenticated and they're supposed to be.", 'start': 1515.946, 'duration': 8.402}, {'end': 1532.77, 'text': "So we're going to go right above the class of app and create a function called onAuthRequired.", 'start': 1524.928, 'duration': 7.842}, {'end': 1539.732, 'text': "And that's going to take in, we're going to put in some curly braces and put in history.", 'start': 1532.79, 'duration': 6.942}, {'end': 1548.211, 'text': 'And then all we want to do here is take that history object, which has a push method.', 'start': 1543.587, 'duration': 4.624}, {'end': 1550.753, 'text': 'So this is basically just like a redirect.', 'start': 1548.511, 'duration': 2.242}, {'end': 1552.994, 'text': 'And we want it to go to slash login.', 'start': 1551.133, 'duration': 1.861}, {'end': 1558.759, 'text': 'And now this onAuthRequired is set to that function onAuthRequired.', 'start': 1554.315, 'duration': 4.444}, {'end': 1564.944, 'text': 'Now the staff page, I actually want this to be private or secure.', 'start': 1560.24, 'duration': 4.704}, {'end': 1568.827, 'text': 'So all we have to do is use secure route instead of route.', 'start': 1565.044, 'duration': 3.783}, {'end': 1571.589, 'text': "So I'm going to go ahead and just do secure route.", 'start': 1569.187, 'duration': 2.402}, {'end': 1576.834, 'text': 'And then for the login page.', 'start': 1573.771, 'duration': 3.063}, {'end': 1586.242, 'text': "it's a little weird, but if we look at the docs and look at login, we want to set it to not just component equals login,", 'start': 1576.834, 'duration': 9.408}, {'end': 1596.291, 'text': 'but we need to use the render attribute or render property, set it to an arrow function that points to the login page or the login component.', 'start': 1586.242, 'duration': 10.049}, {'end': 1599.674, 'text': 'And we want to add in our base URL as well.', 'start': 1597.051, 'duration': 2.623}, {'end': 1603.758, 'text': 'And then a route under that, we want the implicit callback.', 'start': 1600.416, 'duration': 3.342}, {'end': 1605.619, 'text': "Now, we don't have to actually create this.", 'start': 1603.838, 'duration': 1.781}, {'end': 1614.324, 'text': 'OctaReact handles this on its own by putting in its own implicit callback function, which is brought in right here.', 'start': 1606.78, 'duration': 7.544}, {'end': 1621.109, 'text': "So I'm going to copy these two lines, and we're going to just put those in here.", 'start': 1614.344, 'duration': 6.765}, {'end': 1624.09, 'text': 'Now, you want to make sure you change your domain.', 'start': 1621.129, 'duration': 2.961}, {'end': 1627.252, 'text': 'So my domain is this right here.', 'start': 1625.051, 'duration': 2.201}, {'end': 1629.974, 'text': "So I'm going to grab that and just put that in here.", 'start': 1627.272, 'duration': 2.702}, {'end': 1634.801, 'text': "and that'll get passed in as the base URL because this logging component is going to need this.", 'start': 1630.475, 'duration': 4.326}, {'end': 1640.359, 'text': "And I think that's it, guys, as far as app.js goes.", 'start': 1636.876, 'duration': 3.483}, {'end': 1643.14, 'text': 'So we can go ahead and save this.', 'start': 1641.299, 'duration': 1.841}, {'end': 1651.506, 'text': "One thing we're going to do, we're probably going to get an error because the login page, let's just check real quick.", 'start': 1645.382, 'duration': 6.124}, {'end': 1653.327, 'text': 'Yeah, login is not defined.', 'start': 1651.806, 'duration': 1.521}, {'end': 1658.01, 'text': 'So we need to bring that in as a component as well, just like we did with the rest of these.', 'start': 1653.888, 'duration': 4.122}, {'end': 1660.432, 'text': "So let's go ahead and do that.", 'start': 1658.631, 'duration': 1.801}, {'end': 1664.295, 'text': 'So login.', 'start': 1663.014, 'duration': 1.281}, {'end': 1668.858, 'text': "And it's going to be in off.", 'start': 1667.336, 'duration': 1.522}, {'end': 1675.307, 'text': "And it's going to be slash login.", 'start': 1672.764, 'duration': 2.543}, {'end': 1676.989, 'text': 'All right.', 'start': 1675.327, 'duration': 1.662}, {'end': 1683.679, 'text': "So if we look at it now, if I go to staff, you'll see it redirects us to login.", 'start': 1677.27, 'duration': 6.409}, {'end': 1692.246, 'text': "OK, now login isn't showing anything because we haven't we haven't added anything.", 'start': 1686.121, 'duration': 6.125}], 'summary': 'Creating a function for authentication redirect and setting routes for secure and login pages in app.js.', 'duration': 114.028, 'max_score': 1515.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg1515946.jpg'}, {'end': 1761.576, 'src': 'embed', 'start': 1692.266, 'weight': 2, 'content': [{'end': 1695.028, 'text': 'Let me just check something one more time.', 'start': 1692.266, 'duration': 2.762}, {'end': 1697.83, 'text': 'Yeah So if we and if we type in staff.', 'start': 1695.648, 'duration': 2.182}, {'end': 1700.012, 'text': 'Yeah So redirects.', 'start': 1698.991, 'duration': 1.021}, {'end': 1701.913, 'text': 'So so that part of it is working.', 'start': 1700.192, 'duration': 1.721}, {'end': 1712.432, 'text': "Now what we want to do is go to, let's see, we're actually going to create our sign-in widget first.", 'start': 1707.208, 'duration': 5.224}, {'end': 1717.555, 'text': 'The login page is basically like a wrapper for the sign-in widget.', 'start': 1713.112, 'duration': 4.443}, {'end': 1721.397, 'text': 'The sign-in widget is going to be a child component of the login.', 'start': 1718.055, 'duration': 3.342}, {'end': 1728.762, 'text': "So let's actually grab this from the documentation.", 'start': 1722.238, 'duration': 6.524}, {'end': 1732.325, 'text': "So I think it's way up at the top.", 'start': 1730.323, 'duration': 2.002}, {'end': 1738.46, 'text': 'Yeah, right here.', 'start': 1737.819, 'duration': 0.641}, {'end': 1743.703, 'text': "So they actually called it Okta sign-in widget, but we're just going to call it sign-in widget.", 'start': 1738.96, 'duration': 4.743}, {'end': 1745.965, 'text': "So let's grab that.", 'start': 1744.964, 'duration': 1.001}, {'end': 1751.869, 'text': "And in sign-in widget, let's paste that in.", 'start': 1748.827, 'duration': 3.042}, {'end': 1755.692, 'text': "Let's just change it from Okta sign-in widget to just sign-in widget.", 'start': 1751.909, 'duration': 3.783}, {'end': 1761.576, 'text': "And I'm also going to export it down at the bottom.", 'start': 1757.153, 'duration': 4.423}], 'summary': 'Creating a sign-in widget as a child component of the login, following documentation instructions.', 'duration': 69.31, 'max_score': 1692.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg1692266.jpg'}, {'end': 2071.626, 'src': 'embed', 'start': 2037.828, 'weight': 1, 'content': [{'end': 2042.949, 'text': "Now notice that it's asynchronous because this right here will return a promise.", 'start': 2037.828, 'duration': 5.121}, {'end': 2049.772, 'text': "And instead of using dot then and so on, we're just labeling the function asynchronous.", 'start': 2043.67, 'duration': 6.102}, {'end': 2052.493, 'text': "And then we're using a wait to get the response.", 'start': 2049.871, 'duration': 2.622}, {'end': 2058.014, 'text': "So it basically looks like it's a synchronous operation.", 'start': 2053.112, 'duration': 4.902}, {'end': 2062.159, 'text': "So this will tell us if we're authenticated.", 'start': 2059.476, 'duration': 2.683}, {'end': 2071.626, 'text': 'Everything is going to be put into this auth object inside the props because we have that wrapper, that Octa React wrapper around everything.', 'start': 2062.239, 'duration': 9.387}], 'summary': 'Using asynchronous functions with promises and await to handle authentication in octa react wrapper.', 'duration': 33.798, 'max_score': 2037.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg2037828.jpg'}], 'start': 1493.014, 'title': 'Implementing user authentication and sign-in widget in octareact', 'summary': 'Explains implementing user authentication in octareact, including setting up redirect uris, onauthrequired function, securing routes, and login page setup. it also covers implementing the sign-in widget in the login page using react components and handling authentication checks.', 'chapters': [{'end': 1629.974, 'start': 1493.014, 'title': 'Implementing user authentication in octareact', 'summary': 'Explains how to implement user authentication using octareact, including setting up redirect uris, creating an onauthrequired function, securing routes, and setting up the login page with the render attribute and base url. it also mentions the automatic handling of the implicit callback function by octareact.', 'duration': 136.96, 'highlights': ['Setting up redirect URIs and creating onAuthRequired function Explains the process of setting up redirect URIs and creating an onAuthRequired function to redirect users if they are not authenticated, using the history object with a push method to redirect to the login page.', 'Securing routes with secure route Describes the process of making a page private or secure by using the secure route instead of route.', 'Setting up the login page with render attribute and base URL Discusses the use of the render attribute with an arrow function to point to the login component and adding the base URL for the login page.', 'Automatic handling of the implicit callback function by OctaReact Mentions the automatic handling of the implicit callback function by OctaReact, eliminating the need to manually create it.']}, {'end': 2139.115, 'start': 1630.475, 'title': 'Implementing sign-in widget', 'summary': 'Covers implementing the sign-in widget in the login page using react components, including setting up the base url and handling authentication checks, with insights into the usage of lifecycle methods and asynchronous operations.', 'duration': 508.64, 'highlights': ['Implementing the sign-in widget as a child component of the login page The chapter details the process of implementing the sign-in widget as a child component of the login page, emphasizing the use of React components for structuring the application.', 'Setting up the base URL for the sign-in widget The transcript provides insights into setting up the base URL for the sign-in widget, which is accessed through the props and used in initializing the Okta sign-in object.', 'Handling authentication checks using lifecycle methods and asynchronous operations The chapter explains the process of handling authentication checks using lifecycle methods such as componentDidMount and componentDidUpdate, and demonstrates the usage of asynchronous operations for authentication validation.']}], 'duration': 646.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg1493014.jpg', 'highlights': ['Setting up redirect URIs and creating onAuthRequired function', 'Handling authentication checks using lifecycle methods and asynchronous operations', 'Implementing the sign-in widget as a child component of the login page', 'Securing routes with secure route', 'Automatic handling of the implicit callback function by OctaReact', 'Setting up the login page with render attribute and base URL', 'Setting up the base URL for the sign-in widget']}, {'end': 3381.881, 'segs': [{'end': 2307.486, 'src': 'embed', 'start': 2276.62, 'weight': 0, 'content': [{'end': 2277.621, 'text': "So I'm going to bring this over.", 'start': 2276.62, 'duration': 1.001}, {'end': 2279.944, 'text': "So it's just a logo PNG.", 'start': 2278.342, 'duration': 1.602}, {'end': 2281.886, 'text': "It's just something quick I made in Photoshop.", 'start': 2280.004, 'duration': 1.882}, {'end': 2288.913, 'text': "But now that that's in there, what we can do is go back to VS Code and go to our sign in widget.", 'start': 2282.306, 'duration': 6.607}, {'end': 2295.861, 'text': 'And right here where we initialize Okta sign in, we can pass in an additional value of logo.', 'start': 2289.794, 'duration': 6.067}, {'end': 2303.024, 'text': "And I'm just going to say logo dot PNG since it's right in the public folder, we can just that should work.", 'start': 2297.322, 'duration': 5.702}, {'end': 2305.485, 'text': "So now let's go back and there we go.", 'start': 2303.584, 'duration': 1.901}, {'end': 2307.486, 'text': 'We have our little nice looking logo.', 'start': 2305.525, 'duration': 1.961}], 'summary': 'Added a logo png to the sign-in widget, improving visual appeal.', 'duration': 30.866, 'max_score': 2276.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg2276620.jpg'}, {'end': 2371.06, 'src': 'embed', 'start': 2348.148, 'weight': 1, 'content': [{'end': 2357.312, 'text': "okay, so again we're bringing in with auth, we're wrapping it and then you can see that for the, the custom methods here they're using,", 'start': 2348.148, 'duration': 9.164}, {'end': 2360.554, 'text': 'bind this again, so we can clean this up quite a bit.', 'start': 2357.312, 'duration': 3.242}, {'end': 2367.877, 'text': "i'm going to get rid of these three lines where they bind this to check authentication, log in and log out.", 'start': 2360.554, 'duration': 7.323}, {'end': 2371.06, 'text': "so we can get rid of those, And let's go to check authentication.", 'start': 2367.877, 'duration': 3.183}], 'summary': 'Refactoring to remove redundant code and improve efficiency.', 'duration': 22.912, 'max_score': 2348.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg2348148.jpg'}, {'end': 2463.442, 'src': 'embed', 'start': 2434.02, 'weight': 2, 'content': [{'end': 2439.001, 'text': "So I'm going to completely replace the constructor with that, and that will clean this up a little bit.", 'start': 2434.02, 'duration': 4.981}, {'end': 2446.456, 'text': "okay, uh, now let's go down here and see what they have for the actual render.", 'start': 2441.095, 'duration': 5.361}, {'end': 2452.698, 'text': "so basically they're putting their navigation inside the home page, which obviously we don't want.", 'start': 2446.456, 'duration': 6.242}, {'end': 2463.442, 'text': "we created a nav bar and so on, and then this button variable is just basically saying if they're authenticated, then put a log out button.", 'start': 2452.698, 'duration': 10.744}], 'summary': 'Replacing constructor, cleaning up code, fixing navigation placement.', 'duration': 29.422, 'max_score': 2434.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg2434020.jpg'}, {'end': 2839.454, 'src': 'embed', 'start': 2811.817, 'weight': 3, 'content': [{'end': 2819.42, 'text': "If I go to my Chrome tools here and we go to application and then under local storage, you'll see ID token.", 'start': 2811.817, 'duration': 7.603}, {'end': 2827.004, 'text': 'OK. So we have ID token and then in claims we have the email and the.', 'start': 2819.44, 'duration': 7.564}, {'end': 2827.884, 'text': 'we have a lot of stuff.', 'start': 2827.004, 'duration': 0.88}, {'end': 2830.245, 'text': 'we have the email and the name, which is what I want to grab.', 'start': 2827.884, 'duration': 2.361}, {'end': 2835.591, 'text': "So Let's see how we're going to format this.", 'start': 2831.206, 'duration': 4.385}, {'end': 2839.454, 'text': "Let's we don't want a functional component because we are going to have some state.", 'start': 2835.691, 'duration': 3.763}], 'summary': 'Access id token and user details from local storage for formatting.', 'duration': 27.637, 'max_score': 2811.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg2811817.jpg'}, {'end': 3224.476, 'src': 'embed', 'start': 3198.919, 'weight': 4, 'content': [{'end': 3205.803, 'text': 'It gives you the name of basically your unit or whatever this is, Traverse Media Dev, and then the ID.', 'start': 3198.919, 'duration': 6.884}, {'end': 3207.804, 'text': 'And it says, welcome to Okta.', 'start': 3206.243, 'duration': 1.561}, {'end': 3208.645, 'text': 'Hi, John.', 'start': 3208.124, 'duration': 0.521}, {'end': 3212.047, 'text': 'Your organization is using Okta to manage your web applications.', 'start': 3208.665, 'duration': 3.382}, {'end': 3217.71, 'text': 'This means you can conveniently access all the applications you normally use through a single secure home page.', 'start': 3212.407, 'duration': 5.303}, {'end': 3224.476, 'text': 'and it gives you like a link to a video and so on, and it has a big green button that says activate octa account.', 'start': 3218.53, 'duration': 5.946}], 'summary': 'Okta welcomes john to traverse media dev and provides access to web applications through a secure home page.', 'duration': 25.557, 'max_score': 3198.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg3198919.jpg'}], 'start': 2139.695, 'title': 'Customizing okta sign-in and react application modification', 'summary': 'Introduces customizing the okta sign-in widget, cleaning up code, using async functions for authentication, and modifying a react application to create a personalized staff portal with user authentication and local data rendering.', 'chapters': [{'end': 2433.98, 'start': 2139.695, 'title': 'Okta sign-in widget customization', 'summary': 'Introduces customizing the okta sign-in widget with a logo png file, cleaning up the code by removing unnecessary binding and constructors, and using async functions for check authentication, log in, and log out.', 'duration': 294.285, 'highlights': ['Introducing custom logo PNG file to the Okta sign-in widget and displaying it on the sign-in page. Custom logo PNG file added to the public folder, passed as a value to initialize Okta sign-in, and displayed on the sign-in page.', 'Cleaning up the code by removing unnecessary binding and constructors, and setting state without a constructor by directly defining the state object. Removed unnecessary binding for custom methods, eliminated the need for a constructor by setting state directly, resulting in cleaner code.', 'Utilizing async functions for check authentication, log in, and log out to handle asynchronous operations in the code. Implemented async functions for check authentication, log in, and log out to handle asynchronous operations, thereby improving code efficiency.']}, {'end': 2873.638, 'start': 2434.02, 'title': 'React application modification', 'summary': 'Involves modifying a react application, replacing navigation and implementing conditional rendering based on user authentication, resulting in a personalized staff portal with login and logout functionality.', 'duration': 439.618, 'highlights': ['Replacing navigation and implementing conditional rendering The speaker plans to replace the navigation in the React application and use conditional rendering based on user authentication to create a personalized staff portal.', 'Implementation of login and logout functionality The implementation involves creating login and logout buttons, with the ability to log in and out based on user authentication status, enhancing the user experience.', "Utilizing class-based component and state management The speaker opts for a class-based component and state management to maintain the current user's name and email, retrieved from the ID token, for personalization of the staff page."]}, {'end': 3198.339, 'start': 2874.658, 'title': 'Handling local storage and rendering data', 'summary': 'Covers how to retrieve and parse data from local storage, set state with the retrieved data, use destructuring in rendering, and demonstrate adding a user in okta backend, including options for setting passwords and sending activation emails.', 'duration': 323.681, 'highlights': ['The chapter demonstrates how to retrieve and parse data from local storage using lifecycle methods, with the retrieved data used to set the state for the current user email and name, allowing for easy access in rendering and display.', 'The use of destructuring is showcased for rendering, simplifying the code and improving readability by extracting the required variables from the state.', 'A demonstration of adding a user in the Okta backend is provided, including options for setting passwords and sending activation emails, with a step-by-step walkthrough of the process, showcasing practical application and implementation of user management functionalities.', 'The process of adding a user in the Okta backend is detailed, covering the input of user details such as first name, last name, and email address, along with options for setting passwords and sending activation emails, providing comprehensive guidance for user management tasks.']}, {'end': 3381.881, 'start': 3198.919, 'title': 'Implementing okta for user authentication', 'summary': 'Demonstrates the process of setting up an okta account for user authentication, including creating an account, assigning user access to applications, and logging in, providing insights into the potential benefits of using okta for user authentication.', 'duration': 182.962, 'highlights': ['The process of setting up an Okta account for user authentication, including creating an account, assigning user access to applications, and logging in, is detailed.', 'The demonstration shows the potential benefits of using Okta for user authentication, emphasizing the convenience of accessing multiple applications through a single secure home page.', 'The speaker discusses the power of Okta in creating a user base for various applications, highlighting the potential to implement Okta for different technologies like C#, .NET, Java, and iOS.', 'The possibility of implementing Okta with JSON web tokens requests and setting up a custom server is mentioned as a powerful feature.', 'The demonstration compares the functionality of Okta with Auth0, providing insights into different ways to implement user authentication using Okta.', 'The speaker emphasizes the potential benefits of using Okta by highlighting its similarities with Auth0 and mentioning the availability of metrics and logs for monitoring user activity.']}], 'duration': 1242.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5j4FXMQBzmg/pics/5j4FXMQBzmg2139695.jpg', 'highlights': ['Introducing custom logo PNG file to the Okta sign-in widget and displaying it on the sign-in page. Custom logo PNG file added to the public folder, passed as a value to initialize Okta sign-in, and displayed on the sign-in page.', 'Utilizing async functions for check authentication, log in, and log out to handle asynchronous operations in the code. Implemented async functions for check authentication, log in, and log out to handle asynchronous operations, thereby improving code efficiency.', 'Replacing navigation and implementing conditional rendering The speaker plans to replace the navigation in the React application and use conditional rendering based on user authentication to create a personalized staff portal.', 'The chapter demonstrates how to retrieve and parse data from local storage using lifecycle methods, with the retrieved data used to set the state for the current user email and name, allowing for easy access in rendering and display.', 'The process of setting up an Okta account for user authentication, including creating an account, assigning user access to applications, and logging in, is detailed.']}], 'highlights': ['The React application uses Okta for authentication and authorization, showcasing the Acme Staff Portal.', 'Okta platform is compatible with 10 different languages, providing flexibility for developers.', 'The authentication process involves extracting user information from the Okta token stored in local storage.', 'Accessing the Okta dashboard provides developers with a log of user activities and metrics on user base across different platforms.', 'Developers are guided to create an account on developer.octa.com and access necessary information for application integration.', 'Emphasis is placed on the org URL for Okta and the availability of metrics on total users, authentications, and failed logins within the Okta dashboard.', "Registering the React application with Okta The user demonstrates how to register a React application named 'Acme Staff Portal' with Okta and configure its settings, including changing the ports and login redirect URI.", 'Installing necessary dependencies The user explains the process of installing React Router, Okta React, and Okta Sign-In Widget packages using npm to enable route creation, route protection, and a sleek sign-in form.', 'Integrating Bootstrap using a CDN The user shows how to integrate Bootstrap into the React application by adding the Bootstrap CSS file and JavaScript references from the CDN to the index.html file in the public folder.', "Creating a components folder with subfolders for layout, auth, and pages The chapter focuses on creating a components folder in the source, with subfolders for layout, auth, and pages to organize the application's components effectively.", 'Removing unused files and code to clean up the application The transcript discusses the removal of unnecessary files and code, such as logo.svg and app.css, to declutter the application and improve maintainability.', 'Covers setting up a navigation bar with links using the React Router to enable navigation between different pages.', 'Defining routes and components for home and staff pages within the React Router, aiming to establish a structured routing system.', 'Importing and using security, secure route, and implicit callback from the Okta React package in App.js to create secure routes.', 'Configuring properties such as issuer and client ID in the security tag in App.js for securing routes using Okta React package.', 'Wrapping routes inside a container div to achieve a responsive layout, ensuring a structured and organized display of content.', 'Setting up redirect URIs and creating onAuthRequired function', 'Handling authentication checks using lifecycle methods and asynchronous operations', 'Implementing the sign-in widget as a child component of the login page', 'Securing routes with secure route', 'Automatic handling of the implicit callback function by OctaReact', 'Setting up the login page with render attribute and base URL', 'Setting up the base URL for the sign-in widget', 'Introducing custom logo PNG file to the Okta sign-in widget and displaying it on the sign-in page. Custom logo PNG file added to the public folder, passed as a value to initialize Okta sign-in, and displayed on the sign-in page.', 'Utilizing async functions for check authentication, log in, and log out to handle asynchronous operations in the code. Implemented async functions for check authentication, log in, and log out to handle asynchronous operations, thereby improving code efficiency.', 'Replacing navigation and implementing conditional rendering The speaker plans to replace the navigation in the React application and use conditional rendering based on user authentication to create a personalized staff portal.', 'The chapter demonstrates how to retrieve and parse data from local storage using lifecycle methods, with the retrieved data used to set the state for the current user email and name, allowing for easy access in rendering and display.', 'The process of setting up an Okta account for user authentication, including creating an account, assigning user access to applications, and logging in, is detailed.']}