React JS and PHP Restful API User Authentication for Login and Signup.

Here is the continued article on my previous post for creating a welcome with login and logout using ReactJS. Today’s post explains how to implement login authentication system for your React JS applications. It will show you how to log in with a user and store the user session, so it deals with token-based authentication. Since we are using token-based authentication, it protects if any unauthorized request is made and notices for a new login if required. This makes your application’s authentication to be more secure compared with any other authentication system. Every user details will be stored in an external database and a PHP based API is used in the backend for handling this authentication. Hope you’ll find it more easily using this as your authentication system in your ReactJS projects. Let’s look into the live demo and follow the below code.

Read more »

Read More

ReactJS Welcome Page with Routing Tutorial

Days back, I have posted an article on how to create a welcome page with proper login and logout using Ionic 3 and Angular 4. Today’s article is to create the same welcome page with ReactJS and ES 6. The article is about how to login/signup to get inside the application home page, you can navigate to different pages and finally you end up with a logout action. Lets see how to set a starting page with navigations using ReactJS and ES 6.

Video Tutorial: ReactJS Welcome Page with Routing Tutorial

Read more »

Read More

Improvements Coming for Routing in Angular

A little more than a month ago, we introduced a new router at ng-conf. We hoped this would finally resolve the outstanding routing issues in our first design.

It turns out, routing is hard.

We’re grateful to have heard from many folks at ng-conf about flaws in this new design, so we are announcing version 3.0.0-alpha.3 of @angular/router and are deprecating version 2. You should begin using this router right away.

This router was built together with the @ngrx team. This router breaks compatibility with version 2 of @angular/router, but we believe it is a worthwhile successor to version 2 as well as to ngrx’s router.

Version 3.0

While the new version 3.0 of the router needs community validation and field-testing, we intend for this to become the primary router used by Angular applications. This router takes cues from both @ngrx/router router and UI-Router (a huge thank you to Chris for his work, he’s been working to make his ready for Angular 2).

What do I need to know?

1. Route configuration is now specified independently of components
2. Most [RouterLink] directives you have today will keep working
3. The version 3 router is ready to use, and more capabilities are coming
4. Read about the new router today in Victor Savkin’s Full Writeup on Routing
5. Official Documentation will be launched in the next two weeks

Get started by checking out this plunker, stay tuned for more about this Router, and the upcoming Angular 2 RC2.

---

Some backstory for the curious

During the alpha and beta periods of Angular 2, we developed a router (@angular/router-deprecated) that worked fine for many use cases, but had some fundamental problems. Deep linking into lazy loaded sections couldn’t work, our lifecycle hooks used for things like authentication were not compatible with DI, and it was impossible to inspect the whole router tree from a particular routable component.

To resolve these fundamental incompatibilities, in April we began work on a second version of the router (@angular/router 2.0) and rapidly released it as an incremental improvement at the ng-conf conference. Thanks to your input, we know that this new approach did not completely resolve the issues that set us down this path, so we went back to the drawing board and brought in more external collaborators. This path lead us to the latest version of the router we are announcing today.

Read More