{"id":17144,"date":"2017-05-29T15:46:15","date_gmt":"2017-05-29T12:46:15","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=17144"},"modified":"2017-06-07T09:42:44","modified_gmt":"2017-06-07T06:42:44","slug":"build-react-application-user-authentication-15-minutes","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/","title":{"rendered":"Build a React Application with User Authentication in 15 Minutes"},"content":{"rendered":"

Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition!<\/a><\/span><\/p>\n

React has quickly become one of the most favored front-end web frameworks, and is second only to plain old HTML5, according to JAXenter<\/a>. So it\u2019s no surprise that developers are learning it<\/a>, and employers are asking for it<\/a>.<\/p>\n

In this tutorial, you\u2019ll start with a very simple React app with a couple of pages and some routing built in, and add authentication using Okta\u2019s Sign-In Widget<\/a>. The Sign-In Widget is an embeddable Javascript widget that allows developers to use Okta\u2019s secure, scalable architecture with a minimum of effort from within React applications. Let\u2019s get started!<\/p>\n

Get the Simple React Seed Project<\/h2>\n

Start by cloning the simple React seed project.<\/p>\n

git clone https:\/\/github.com\/leebrandt\/simple-react-seed.git okta-react-widget-sample\r\ncd okta-react-widget-sample\r\nnpm install\r\nnpm start<\/pre>\n
When you open http:\/\/localhost:3000<\/code>, you should see something like this:<\/p>\n
\"\"<\/a><\/p>\n
When you click on the navigation links, you should see page placeholders for those links.<\/p>\n
Add the Okta Sign-In Widget<\/h2>\n
Install the Okta Sign-In Widget<\/a> using NPM. We\u2019ll be using version 1.9.0 of the Sign-In Widget, which is the most recent version at the time of this writing. Note that using Yarn won\u2019t work<\/a>.<\/p>\n
npm install @okta\/okta-signin-widget@1.9.0 --save<\/pre>\n
This will add the Okta Sign-In Widget code to your node_modules<\/code> folder.<\/p>\n
\"\"<\/a><\/p>\n
Then add the styles for the widget in your index.html<\/code> file from the Okta CDN:<\/p>\n
<link \r\n     href=\"https:\/\/ok1static.oktacdn.com\/assets\/js\/sdk\/okta-signin-widget\/1.9.0\/css\/okta-sign-in.min.css\"\r\n      type=\"text\/css\"\r\n      rel=\"stylesheet\"\/>\r\n\r\n    <!-- Theme file: Customize or replace this file if you want to override our default styles -->\r\n    <link\r\n      href=\"https:\/\/ok1static.oktacdn.com\/assets\/js\/sdk\/okta-signin-widget\/1.9.0\/css\/okta-theme.css\"\r\n      type=\"text\/css\"\r\n      rel=\"stylesheet\"\/><\/pre>\n
The LoginPage Component<\/h2>\n
First, create a folder called auth<\/code> in the .\/src\/components<\/code> folder, then create a file called LoginPage.js<\/code> where the LoginPage<\/code> component will go.<\/p>\n
Start with the most basic of components<\/p>\n
import React from 'react';\r\n\r\nexport default class LoginPage extends React.Component{\r\n  render(){\r\n    return(\r\n      <div>Login Page<\/div>\r\n    );\r\n  }\r\n}<\/pre>\n
This little component doesn\u2019t do<\/em> much but at least you now have a handle to add the LoginPage<\/code> to your routing. So in your .\/src\/app.js<\/code> file, you\u2019ll import the component with:<\/p>\n
import LoginPage from '.\/components\/auth\/LoginPage';<\/pre>\n
and then add the route inside the main route (the one with the path of \u201c\/\u201d)<\/p>\n
<Route path=\"\/login\" component={LoginPage}\/><\/pre>\n
Add the OpenID Connect Application in Okta<\/h2>\n
In order to use<\/em> Okta as your OpenID Connect provider for authentication, you\u2019ll need to set up an application in the Okta developer portal<\/a>.<\/p>\n
So log in to your Okta account, [or create one](http:\/\/developer.okta.com] if you haven\u2019t yet. Navigate to Admin > Add Applications and click on the Create New App button. Select Single Page App (SPA) for Platform and OpenID Connect for the sign on method. Click the Create button and give your application a name. On the next screen, add http:\/\/localhost:3000<\/code> as a Redirect URI and click Finish. You should see settings like the following.<\/p>\n
\"\"<\/a><\/p>\n
Make note of the Client ID<\/code> (yours shouldn\u2019t be blurred out) and make note of your Dev ID (it\u2019s the number part of your subdomain of the URL) So if you are at https:\/\/dev-1234-admin.oktapreview.com\/\u2026 your Dev ID is 1234.<\/p>\n
Now that you have that, you can set up the widget to talk to your new app!<\/p>\n
Add the Widget to Your Component<\/h2>\n
import React from 'react';\r\nimport OktaSignIn from '@okta\/okta-signin-widget';\r\n\r\nexport default class LoginPage extends React.Component{\r\n  constructor(){\r\n    super();\r\n    this.widget = new OktaSignIn({\r\n      baseUrl: 'https:\/\/dev-[dev id].oktapreview.com',\r\n      clientId: '[client id]',\r\n      redirectUri: 'http:\/\/localhost:3000'\r\n    });\r\n  }\r\n\r\n  render(){\r\n    return(\r\n      <div>Login Page<\/div>\r\n    );\r\n  }\r\n}<\/pre>\n
Thus far you\u2019ve imported the OktaSignIn<\/code> function from the Okta Sign-In Widget<\/a> npm<\/code> module you installed earlier. Next, in the constructor of the component, you initialized an instance of OktaSignIn<\/code> with the configuration for the application. This way, the application code will be able to talk to Okta and Okta will recognize that this is the app you just created.<\/p>\n
Show The Login Widget<\/h2>\n
Next, you\u2019ll create the code to actually render the Sign-In Widget to the page! You\u2019ll need to change your render method to create an HTML element you can render the widget into. Make sure to get a reference to the element<\/a> that will be rendered. Then, add a componentDidMount<\/code> function to make sure you don\u2019t try to render the widget before the HTML element is on the page.<\/p>\n
import React from 'react';\r\nimport OktaSignIn from '@okta\/okta-signin-widget';\r\n\r\nexport default class LoginPage extends React.Component{\r\n  constructor(){\r\n    super();\r\n    this.state = {user:null};\r\n    this.widget = new OktaSignIn({\r\n      baseUrl: 'https:\/\/dev-[dev id].oktapreview.com',\r\n      clientId: '[client id]',\r\n      redirectUri: 'http:\/\/localhost:3000',\r\n      authParams: {\r\n        responseType: 'id_token'\r\n      }\r\n    });\r\n  }\r\n\r\n  componentDidMount(){\r\n    this.widget.renderEl({el:this.loginContainer},\r\n      (response) => {\r\n        this.setState({user: response.claims.email});\r\n      },\r\n      (err) => {\r\n        console.log(err);\r\n      }\r\n    );\r\n  }\r\n\r\n  render(){\r\n    return(\r\n     <div ref={(div) => {this.loginContainer = div; }} \/>\r\n    );\r\n  }\r\n}<\/pre>\n
You also added state to your component. If you\u2019re using a flux implementation, this would naturally come from the app state. But to keep this tutorial simple, let your LoginPage<\/code> keep track of it\u2019s own state.<\/p>\n
Check Whether the User is Logged In<\/h2>\n
We\u2019re almost there, but you don\u2019t necessarily want to render the widget right away. You\u2019ll need to add a check to make sure the user isn\u2019t already logged in, and move your renderEl<\/code> out to a function called showLogin<\/code>.<\/p>\n
\/\/ ...other stuff removed for brevity's sake\r\n componentDidMount(){\r\n    this.widget.session.get((response) => {\r\n      if(response.status !== 'INACTIVE'){\r\n        this.setState({user:response.login});\r\n      }else{\r\n        this.showLogin();\r\n      }\r\n    });\r\n  }\r\n\r\n  showLogin(){\r\n    Backbone.history.stop();\r\n    this.widget.renderEl({el:this.loginContainer},\r\n      (response) => {\r\n        this.setState({user: response.claims.email});\r\n      },\r\n      (err) => {\r\n        console.log(err);\r\n      }\r\n    );\r\n  }<\/pre>\n
You might have noticed a weird bit of code in that showLogin<\/code> method. That first line: Backbone.history.stop()<\/code>. The widget itself uses Backbone.js<\/a> to navigate between its own screens (login, forgot password, etc.), and when it renders, it starts the Backbone.history<\/code>. Since you\u2019ve now moved it out into a showLogin<\/code> function, the widget is going to re-render whenever the function is called. So this is just a little trick to tell Backbone to stop the history, because it\u2019s going to restart when the widget is rendered.<\/em><\/p><\/blockquote>\n
The Final LoginPage React Component<\/h2>\n
Let\u2019s wrap this up. Make sure you bind the class\u2019s this<\/code> context to each of your methods. Add a logout<\/code> method, and change your render<\/code> method to make a decision on what to render, based on whether there is a currently logged in user.<\/p>\n
So the final version of LoginPage.js<\/code> should look like this.<\/p>\n
import React from 'react';\r\nimport OktaSignIn from '@okta\/okta-signin-widget';\r\n\r\nexport default class LoginPage extends React.Component{\r\n  constructor(){\r\n    super();\r\n    this.state = { user: null };\r\n    this.widget = new OktaSignIn({\r\n      baseUrl: 'https:\/\/dev-[dev id].oktapreview.com',\r\n      clientId: '[client id]',\r\n      redirectUri: 'http:\/\/localhost:3000',\r\n      authParams: {\r\n        responseType: 'id_token'\r\n      }\r\n    });\r\n\r\n    this.showLogin = this.showLogin.bind(this);\r\n    this.logout = this.logout.bind(this);\r\n  }\r\n\r\n  componentDidMount(){\r\n    this.widget.session.get((response) => {\r\n      if(response.status !== 'INACTIVE'){\r\n        this.setState({user:response.login});\r\n      }else{\r\n        this.showLogin();\r\n      }\r\n    });\r\n  }\r\n\r\n  showLogin(){\r\n    Backbone.history.stop();\r\n    this.widget.renderEl({el:this.loginContainer}, \r\n      (response) => {\r\n        this.setState({user: response.claims.email});\r\n      },\r\n      (err) => {\r\n        console.log(err);\r\n      }\r\n    );\r\n  }\r\n\r\n  logout(){\r\n    this.widget.signOut(() => {\r\n      this.setState({user: null});\r\n      this.showLogin();\r\n    });\r\n  }\r\n\r\n  render(){\r\n    return(\r\n      <div>\r\n        {this.state.user ? (\r\n          <div className=\"container\">\r\n            <div>Welcome, {this.state.user}!<\/div>\r\n            <button onClick={this.logout}>Logout<\/button>\r\n          <\/div>\r\n        ) : null}\r\n        {this.state.user ? null : (\r\n          <div ref={(div) => {this.loginContainer = div; }} \/>\r\n        )}\r\n      <\/div>\r\n    );\r\n  }\r\n}<\/pre>\n
Check It Out<\/h2>\n
When you run the app now (with npm start<\/code>), you should see something like this:<\/p>\n
\"\"<\/a><\/p>\n
If it works – congrats! If it doesn\u2019t, please post a question to Stack Overflow with an okta tag<\/a>, or hit me up on Twitter @leebrandt<\/a>.<\/p>\n
Known Issues<\/h2>\n
There is one known issue in this tutorial. The widget\u2019s CSS takes over the whole page and will override your app\u2019s CSS. This is a documented issue<\/a> and you can see Matt Raible\u2019s comment on it<\/a><\/p>\n
React + Okta<\/h2>\n
You can find a completed version of the application created in this blog post on GitHub<\/a>.<\/p>\n
Building authentication in an application is hard. It\u2019s even less fun to build it over and over again in each application you build. Okta does the hard part for you and makes it a lot more fun to be a developer! Sign up for a forever-free developer account<\/a> and try Okta today!<\/p>\n
I hope you\u2019ve enjoyed this quick tour of our React support. If you have questions about Okta\u2019s features, or what we\u2019re building next, please hit me up on Twitter @leebrandt<\/a>, leave a comment below, or open an issue on GitHub.<\/p>\n
Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition!<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition! React has quickly become one of the most favored front-end web frameworks, and is second only to plain old HTML5, according to JAXenter. So it\u2019s no surprise that developers are learning it, and employers are asking for it. …<\/p>\n","protected":false},"author":541,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[463],"class_list":["post-17144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-react-js"],"yoast_head":"\nBuild a React Application with User Authentication in 15 Minutes - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition! React has quickly become one of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a React Application with User Authentication in 15 Minutes - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition! React has quickly become one of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-29T12:46:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-07T06:42:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lee Brandt\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lee Brandt\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/\"},\"author\":{\"name\":\"Lee Brandt\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0a47d634e01fc625cddc0692bad456b8\"},\"headline\":\"Build a React Application with User Authentication in 15 Minutes\",\"datePublished\":\"2017-05-29T12:46:15+00:00\",\"dateModified\":\"2017-06-07T06:42:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/\"},\"wordCount\":1052,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"React.js\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/\",\"name\":\"Build a React Application with User Authentication in 15 Minutes - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2017-05-29T12:46:15+00:00\",\"dateModified\":\"2017-06-07T06:42:44+00:00\",\"description\":\"Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition! React has quickly become one of\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Build a React Application with User Authentication in 15 Minutes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0a47d634e01fc625cddc0692bad456b8\",\"name\":\"Lee Brandt\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e199ea33ed5e64e515b5d1fe420c95be682de0f179907731c2019be84467fc71?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e199ea33ed5e64e515b5d1fe420c95be682de0f179907731c2019be84467fc71?s=96&d=mm&r=g\",\"caption\":\"Lee Brandt\"},\"sameAs\":[\"http:\/\/developer.okta.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/lee-brandt\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build a React Application with User Authentication in 15 Minutes - Web Code Geeks - 2026","description":"Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition! React has quickly become one of","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/","og_locale":"en_US","og_type":"article","og_title":"Build a React Application with User Authentication in 15 Minutes - Web Code Geeks - 2026","og_description":"Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition! React has quickly become one of","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-05-29T12:46:15+00:00","article_modified_time":"2017-06-07T06:42:44+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Lee Brandt","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Lee Brandt","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/"},"author":{"name":"Lee Brandt","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0a47d634e01fc625cddc0692bad456b8"},"headline":"Build a React Application with User Authentication in 15 Minutes","datePublished":"2017-05-29T12:46:15+00:00","dateModified":"2017-06-07T06:42:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/"},"wordCount":1052,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["React.js"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/","name":"Build a React Application with User Authentication in 15 Minutes - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2017-05-29T12:46:15+00:00","dateModified":"2017-06-07T06:42:44+00:00","description":"Build faster with Okta\u2019s authentication and user management API. Register today for the free forever Developer Edition! React has quickly become one of","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-react-application-user-authentication-15-minutes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Build a React Application with User Authentication in 15 Minutes"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0a47d634e01fc625cddc0692bad456b8","name":"Lee Brandt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e199ea33ed5e64e515b5d1fe420c95be682de0f179907731c2019be84467fc71?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e199ea33ed5e64e515b5d1fe420c95be682de0f179907731c2019be84467fc71?s=96&d=mm&r=g","caption":"Lee Brandt"},"sameAs":["http:\/\/developer.okta.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/lee-brandt\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/541"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=17144"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17144\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=17144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=17144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=17144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}