{"id":42,"date":"2019-01-15T07:00:52","date_gmt":"2019-01-15T07:00:52","guid":{"rendered":"https:\/\/crosstechit.com\/blog\/?p=42"},"modified":"2020-04-18T07:35:29","modified_gmt":"2020-04-18T07:35:29","slug":"react-js-authentication-with-laravel-back-end","status":"publish","type":"post","link":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/","title":{"rendered":"React JS authentication with Laravel API"},"content":{"rendered":"\n<p>We want to create a consumer web app for our API developed using Laravel Passport and Dingo API.  Laravel has it&#8217;s built in webpack for Vue and ReactJS so we can nicely integrate our client app into existing project.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"> Result<\/h1>\n\n\n\n<p>Here you can find final updated result containing views for:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Login<\/li><li>Register<\/li><li>Forgot password (2 steps)<\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/github.com\/danielcrt\/laravel-reactjs-passport-authentication\">https:\/\/github.com\/danielcrt\/laravel-reactjs-passport-authentication<\/a><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Setup<\/h1>\n\n\n\n<p>Setup ReactJS inside Laravel project.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> php artisan preset react <\/pre>\n\n\n\n<p>This will remove unnecessary files and prepare the project structure for a React app. You can see in your root directory a file <code>webpack.mix.js<\/code> where are defined the paths for compiled folders and files.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> <br>mix.react('resources\/js\/app.js', 'public\/js')<br>   .sass('resources\/sass\/app.scss', 'public\/css'); <\/pre>\n\n\n\n<p>So all JS\/JSX files from <code>public\/js<\/code> will be compiled to <code>app.js<\/code>. The same will happen for CSS files.<\/p>\n\n\n\n<p>We want all routes to be handled by React so in <code>routes\\web.php<\/code> we must have:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">View<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\"> <br>Route::view('\/{path?}', 'home')<br>     -&gt;where('path', '.*')<br>     -&gt;name('react');<\/pre>\n\n\n\n<p>This is telling Laravel that for all routes it should return the home view found in <code>resources\\views\\home.blade.php<\/code>. In this file it is important to include our compiled CSS and JS files.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;head&gt;<br>    ...<br>    &lt;link rel=\"stylesheet\" href=\"{{ asset(\"css\/app.css\") }}\" type=\"text\/css\"&gt;<br>&lt;\/head&gt;<br>...<br> <br>    &lt;script type=\"text\/javascript\" src=\"{{ asset(\"js\/app.js\") }}\"&gt;&lt;\/script&gt;<br>&lt;\/body&gt; <\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Show me React stuff<\/h2>\n\n\n\n<p>In our <code>resources\\js\\app.js<\/code> the <code>bootstrap.js<\/code> file is required by default. And along that we should require our entry point into the app.  In bootstrap file are included jQuery library and bootstrap js  files.  If you don&#8217;t plan to use them you can remove these to lower the build size.<\/p>\n\n\n\n<p>Below that you have some important lines adding  <code> X-Requested-With<\/code> and <code>X-CSRF-TOKEN<\/code> headers to axios. If you plan not making requests using axios than you have to handle the by your own. You can prepare the CSRF token for later use in Javascript adding following lines to your view:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;script&gt;<br>    window.Laravel = {!! json_encode([<br>        'csrfToken' =&gt; csrf_token(),<br>    ]) !!};<br>&lt;\/script&gt; <\/pre>\n\n\n\n<p>We have used Redux in order to have access to user&#8217;s state all over the app so we wrapped our application in a <code>Provider<\/code>in <code>js\\components\\App.jsx<\/code>. <\/p>\n\n\n\n<p>In <code>js\\helpers<\/code>we have added <code>withCredentials&nbsp;=&nbsp;true<\/code> to axios configs. This will ensure that the authentication cookie will always be send back to the server. In order to handle the case when user wants to access protected routes without being authenticated we created a interceptor which will remove the local stored variable which tells us if user is logged in (for client side usage) and redirect him to home page.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">axios.defaults.withCredentials = true; <br> <br>axios.interceptors.response.use(<br>  response =&gt; response,<br>  (error) =&gt; {<br>    if (error.response.data.status_code === 401) {<br>      \/\/ we already know from the server that user is no longer logged in<br>      \/\/ just delete the local field<br>      localStorage.removeItem(GlobalConstants.USER_KEY);<br>      history.push('\/');<br>    }<br>    return Promise.reject(error);<br>  }); <\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">Wrap in up<\/h1>\n\n\n\n<p>That&#8217;s pretty much it. I feel these were the key elements which could save your development time.<\/p>\n\n\n\n<p>If you&#8217;d like me to detail more the project structure and components just let me know in comments section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We want to create a consumer web app for our API developed using Laravel Passport and Dingo API. Laravel has it&#8217;s built in webpack for Vue and ReactJS so we can nicely integrate our client app into existing project. Result Here you can find final updated result containing views for: Login Register Forgot password (2 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-front-end-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React JS authentication with Laravel API - Crosstech IT | Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React JS authentication with Laravel API - Crosstech IT | Blog\" \/>\n<meta property=\"og:description\" content=\"We want to create a consumer web app for our API developed using Laravel Passport and Dingo API. Laravel has it&#8217;s built in webpack for Vue and ReactJS so we can nicely integrate our client app into existing project. Result Here you can find final updated result containing views for: Login Register Forgot password (2 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/\" \/>\n<meta property=\"og:site_name\" content=\"Crosstech IT | Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-15T07:00:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-18T07:35:29+00:00\" \/>\n<meta name=\"author\" content=\"Daniel Isac\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Isac\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/\"},\"author\":{\"name\":\"Daniel Isac\",\"@id\":\"https:\/\/crosstechit.com\/blog\/#\/schema\/person\/87da6aed97c0aeed77f83359af00d85e\"},\"headline\":\"React JS authentication with Laravel API\",\"datePublished\":\"2019-01-15T07:00:52+00:00\",\"dateModified\":\"2020-04-18T07:35:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/\"},\"wordCount\":394,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/crosstechit.com\/blog\/#organization\"},\"articleSection\":[\"Front end development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/\",\"url\":\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/\",\"name\":\"React JS authentication with Laravel API - Crosstech IT | Blog\",\"isPartOf\":{\"@id\":\"https:\/\/crosstechit.com\/blog\/#website\"},\"datePublished\":\"2019-01-15T07:00:52+00:00\",\"dateModified\":\"2020-04-18T07:35:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crosstechit.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React JS authentication with Laravel API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crosstechit.com\/blog\/#website\",\"url\":\"https:\/\/crosstechit.com\/blog\/\",\"name\":\"Crosstech IT | Blog\",\"description\":\"Apps. Smart. Fun.\",\"publisher\":{\"@id\":\"https:\/\/crosstechit.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crosstechit.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crosstechit.com\/blog\/#organization\",\"name\":\"Crosstech IT | Blog\",\"url\":\"https:\/\/crosstechit.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crosstechit.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crosstechit.com\/blog\/wp-content\/uploads\/2019\/01\/cropped-favicon.png\",\"contentUrl\":\"https:\/\/crosstechit.com\/blog\/wp-content\/uploads\/2019\/01\/cropped-favicon.png\",\"width\":190,\"height\":190,\"caption\":\"Crosstech IT | Blog\"},\"image\":{\"@id\":\"https:\/\/crosstechit.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/crosstechit.com\/blog\/#\/schema\/person\/87da6aed97c0aeed77f83359af00d85e\",\"name\":\"Daniel Isac\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crosstechit.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/382d66c0eb0b506a1e6e5a10ae490d874d790f13b1af6a6f3958c1a7b3f23743?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/382d66c0eb0b506a1e6e5a10ae490d874d790f13b1af6a6f3958c1a7b3f23743?s=96&d=mm&r=g\",\"caption\":\"Daniel Isac\"},\"url\":\"https:\/\/crosstechit.com\/blog\/author\/danielcrt\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React JS authentication with Laravel API - Crosstech IT | Blog","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:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/","og_locale":"en_US","og_type":"article","og_title":"React JS authentication with Laravel API - Crosstech IT | Blog","og_description":"We want to create a consumer web app for our API developed using Laravel Passport and Dingo API. Laravel has it&#8217;s built in webpack for Vue and ReactJS so we can nicely integrate our client app into existing project. Result Here you can find final updated result containing views for: Login Register Forgot password (2 [&hellip;]","og_url":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/","og_site_name":"Crosstech IT | Blog","article_published_time":"2019-01-15T07:00:52+00:00","article_modified_time":"2020-04-18T07:35:29+00:00","author":"Daniel Isac","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Daniel Isac","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/#article","isPartOf":{"@id":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/"},"author":{"name":"Daniel Isac","@id":"https:\/\/crosstechit.com\/blog\/#\/schema\/person\/87da6aed97c0aeed77f83359af00d85e"},"headline":"React JS authentication with Laravel API","datePublished":"2019-01-15T07:00:52+00:00","dateModified":"2020-04-18T07:35:29+00:00","mainEntityOfPage":{"@id":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/"},"wordCount":394,"commentCount":4,"publisher":{"@id":"https:\/\/crosstechit.com\/blog\/#organization"},"articleSection":["Front end development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/","url":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/","name":"React JS authentication with Laravel API - Crosstech IT | Blog","isPartOf":{"@id":"https:\/\/crosstechit.com\/blog\/#website"},"datePublished":"2019-01-15T07:00:52+00:00","dateModified":"2020-04-18T07:35:29+00:00","breadcrumb":{"@id":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crosstechit.com\/blog\/2019\/01\/15\/react-js-authentication-with-laravel-back-end\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crosstechit.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React JS authentication with Laravel API"}]},{"@type":"WebSite","@id":"https:\/\/crosstechit.com\/blog\/#website","url":"https:\/\/crosstechit.com\/blog\/","name":"Crosstech IT | Blog","description":"Apps. Smart. Fun.","publisher":{"@id":"https:\/\/crosstechit.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crosstechit.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crosstechit.com\/blog\/#organization","name":"Crosstech IT | Blog","url":"https:\/\/crosstechit.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crosstechit.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/crosstechit.com\/blog\/wp-content\/uploads\/2019\/01\/cropped-favicon.png","contentUrl":"https:\/\/crosstechit.com\/blog\/wp-content\/uploads\/2019\/01\/cropped-favicon.png","width":190,"height":190,"caption":"Crosstech IT | Blog"},"image":{"@id":"https:\/\/crosstechit.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/crosstechit.com\/blog\/#\/schema\/person\/87da6aed97c0aeed77f83359af00d85e","name":"Daniel Isac","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crosstechit.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/382d66c0eb0b506a1e6e5a10ae490d874d790f13b1af6a6f3958c1a7b3f23743?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/382d66c0eb0b506a1e6e5a10ae490d874d790f13b1af6a6f3958c1a7b3f23743?s=96&d=mm&r=g","caption":"Daniel Isac"},"url":"https:\/\/crosstechit.com\/blog\/author\/danielcrt\/"}]}},"_links":{"self":[{"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":6,"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crosstechit.com\/blog\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}