Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edits: spelling and grammar #1

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
7053db8
Grammatical edit: added comma
Mar 10, 2018
38444aa
Re-worded sentence to flow a bit more smoothly
Mar 10, 2018
f7905cc
Added comma
Mar 10, 2018
b3c4e33
Added comma
Mar 10, 2018
c0dbcde
Hyphenated adjective phrase (multi-word phrases which serve as adject…
Mar 10, 2018
855e6d6
Added comma [
Mar 10, 2018
f737c39
Hyphenated adjective phrase
Mar 10, 2018
f7d049a
Grammatical tweak ->
Mar 10, 2018
5fb15c1
Hyphenated multi-word adjective phrase
Mar 10, 2018
7626c30
Hyphenated multi-word adjective phrase
Mar 10, 2018
4b97900
Hyphenated multi-word adjective phrase
Mar 10, 2018
9227460
Hyphenated multi-word adjective phrase
Mar 10, 2018
2c9295f
Hyphenated multi-word adjective phrase
Mar 10, 2018
13ca537
Added comma
Mar 10, 2018
48d7b3a
wtmp begins Fri Mar 9 19:51 ->
Mar 10, 2018
90aa92a
Hyphenated multi-word adjective phrase
Mar 10, 2018
e905620
Hyphenated multi-word adjective phrase
Mar 10, 2018
fc9006b
Added comma
Mar 10, 2018
0e27b30
Grammatical tweak ('best way to start is implementing' -> 'best way t…
Mar 10, 2018
480b6e6
Grammatical tweak
Mar 10, 2018
52df1b9
Hyphenation
Mar 10, 2018
7d44666
Added comma
Mar 10, 2018
de81f19
Replaced 'webserver' with 'web server' (it's two words) [https://en.w…
Mar 10, 2018
6d0dd3c
Added comma
Mar 10, 2018
6a605e3
Grammatical tweak
Mar 10, 2018
c69a77a
Grammatical tweak
Mar 10, 2018
f75705e
Grammatical tweak
Mar 10, 2018
0c32e92
Punctuation correction
Mar 10, 2018
014335e
Grammatical tweak
Mar 10, 2018
72400ab
Added comma
Mar 10, 2018
6d6bcec
Added missing article: 'define a [...] component as functional, state…
Mar 10, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions manuscript/chapter1.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# React Application Setup: create-react-app

You are going to implement a whole authentication mechanism in React with sign up, sign in and sign out. Furthermore, it should be possible to reset a password or change a password as a user. The latter option is only available for an authenticated user. Last but not least, it should be possible to protect certain routes (URLs) to be only used by authenticated users. Therefore you will build a proper authorization solution around it.
You are going to implement a whole authentication mechanism in React with sign up, sign in and sign out. Furthermore, it should be possible to reset a password or change a password as a user. The latter option is only available for an authenticated user. Last, but not least, it should be possible to protect certain routes (URLs) to be accessible by authenticated users only. Therefore you will build a proper authorization solution around it.

The application will be bootstrapped with Facebook's official React boilerplate project [create-react-app](https://github.com/facebookincubator/create-react-app). You can install it once globally on the command line and make use of it whenever you want afterward.
The application will be bootstrapped with Facebook's official React boilerplate project [create-react-app](https://github.com/facebookincubator/create-react-app). You can install it once globally on the command line, and make use of it whenever you want afterward.

{title="Command Line",lang="text"}
~~~~~~~~
Expand All @@ -17,7 +17,7 @@ create-react-app react-firebase-authentication
cd react-firebase-authentication
~~~~~~~~

Now you have the following commands on your command line to start and test your application. Unfortunately the tutorial doesn't cover testing yet.
Now you have the following commands on your command line to start and test your application. Unfortunately, the tutorial doesn't cover testing yet.

{title="Command Line",lang="text"}
~~~~~~~~
Expand All @@ -40,7 +40,7 @@ cd src
mkdir components
~~~~~~~~

Next, move the App component and all its related files to the *components/* folder. That way, you will start off with a well structured folder/file hierarchy.
Next, move the App component and all its related files to the *components/* folder. That way, you will start off with a well-structured folder/file hierarchy.

{title="Command Line",lang="text"}
~~~~~~~~
Expand All @@ -50,7 +50,7 @@ mv App.css components/
mv logo.svg components/
~~~~~~~~

Last but not least, fix the relative path to the App component in the *src/index.js* file. Since you have moved the App component, you need to add the */components* subpath.
Last, but not least, fix the relative path to the App component in the *src/index.js* file. Since you have moved the App component, you need to add the */components* subpath.

{title="src/index.js",lang=javascript}
~~~~~~~~
Expand All @@ -68,4 +68,4 @@ registerServiceWorker();

Next, run your application on the command line again. It should work again and be accessible in the browser for you. Make yourself familiar with it if you haven't used create-react-app before.

Before implementing the authentication in React, it would be great to have a couple of pages (e.g. sign up page, sign in page) to split up the application on multiple URLs (routes). Therefore, let's implement the routing with React Router first before diving into Firebase and the authentication afterward.
Before implementing the authentication in React, it would be great to have a couple of pages (e.g. sign-up page, sign-in page) to split up the application into multiple URLs (routes). Therefore, let's implement the routing with React Router first before diving into Firebase and the authentication afterward.
22 changes: 11 additions & 11 deletions manuscript/chapter2.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# React Router and Routes

The following application should have multiple routes for the authentication mechanism but also for the application domain itself. Therefore, you can create a file to consolidate all the routes of your application in well defined constants. Keep it in a constants folder to add more of those files eventually.
The following application should have multiple routes for the authentication mechanism but also for the application domain itself. Therefore, you can create a file to consolidate all the routes of your application in well-defined constants. Keep it in a constants folder to add more of those files eventually.

{title="Command Line: src/",lang="text"}
~~~~~~~~
Expand All @@ -21,25 +21,25 @@ export const ACCOUNT = '/account';
export const PASSWORD_FORGET = '/pw-forget';
~~~~~~~~

Each route represents a page in your application. For instance, the sign up page should be reachable in development mode via *http://localhost:3000/signup* and in production mode via *http://yourdomain/signup*. Let's walk through the routes step by step.
Each route represents a page in your application. For instance, the sign-up page should be reachable in development mode via *http://localhost:3000/signup* and in production mode via *http://yourdomain/signup*. Let's walk through the routes step by step.

First of all, you will have a **sign up page** and a **sign in page**. You can take any web application out there as the blueprint to structure these routes for an authentication mechanism. For instance, take the following scenario: A user visits your web application. The user is convinced by your service and finds the button in the navigation bar to sign in to your application. But the user has no account yet, so a sign up button is presented as an alternative on the sign in page.
First of all, you will have a **sign-up page** and a **sign-in page**. You can take any web application out there as the blueprint to structure these routes for an authentication mechanism. For instance, take the following scenario: A user visits your web application. The user is convinced by your service and finds the button in the navigation bar to sign in to your application. But the user has no account yet, so a sign-up button is presented as an alternative on the sign-in page.

![Sign In](images/sign.jpg)

Second, there will be a **landing page** and a **home page**. The landing page is your root route. That's the place where a user ends up when visiting your web application by default. The user doesn't need to be authenticated to visit this route. On the other hand, the home page is a so called **protected route**. The user can only access it when being authenticated. You will implement the protection of the route by using authorization in this tutorial.
Second, there will be a **landing page** and a **home page**. The landing page is your root route. That's the place where a user ends up when visiting your web application by default. The user doesn't need to be authenticated to visit this route. On the other hand, the home page is a so-called **protected route**. The user can only access it when being authenticated. You will implement the protection of the route by using authorization in this tutorial.

Third, there will be a protected **account page** as well. On this page, a user can reset a password or change a password. It is secured by authorization as well and thus only reachable for authenticated.
Third, there will be a protected **account page** as well. On this page, a user can reset a password or change a password. It is secured by authorization as well, and thus only reachable for authenticated.

![Account Page](images/account.jpg)

Last but not least, the password forget component will be exposed on another non protected page, a **password forget page**, as well. It is used for users who are not authenticated and forgot about their password.
Last, but not least, the password forget component will be exposed on another non-protected page, a **password-forget page**, as well. It is used for users who are not authenticated and forgot about their password.

![Password Forget Page](images/password-reset.jpg)

Now all of these routes need to be accessible to the user. How to get started with the routing in React? The best way to start is implementing a Navigation component which is used in the App component. The App component is the perfect place to render the Navigation component, because it will always render the Navigation component but replace the other components (pages) based on the mapped route. Basically, the App component is the container where all your fixed components are going (navigation bar, side bar, footer) but also your components which are displayed depending on the route in the URL.
Now, all of these routes need to be accessible to the user. How to get started with the routing in React? The best way to start is by implementing a Navigation component which is used in the App component. The App component is the perfect place to render the Navigation component, because it will always render the Navigation component but replace the other components (pages) based on the mapped route. Basically, the App component is the container where all your fixed components are going (navigation bar, side bar, footer) but also your components which are displayed depending on the route in the URL.

First, refactor your App component to the following implementation. It will use the Navigation component and wraps it already in the Router component provided by React Router. The Router makes it possible to navigate from URL to URL on the client-side application without making requests to a webserver. Thus the applications need to be requested only once from the server and do the routing only on the client-side.
First, refactor your App component as follows: It will use the Navigation component and wraps it already in the Router component provided by React Router. The Router makes it possible to navigate from URL-to-URL on the client-side application, without making requests to a web server. Thus, applications need to be requested only once from the server, with the process of handling requested routes handled on the client side.

{title="src/components/App.js",lang=javascript}
~~~~~~~~
Expand All @@ -56,7 +56,7 @@ const App = () =>
export default App;
~~~~~~~~

In addition, you can remove the *logo.svg* because it isn't used anymore. Moreover, it is up to you to keep the *App.css* file to style your application in between of this tutorial.
In addition, you can remove the *logo.svg* image, because it isn't used anymore. Moreover, it is up to you to keep the *App.css* file up to date, to enhance your application's appearance, as we proceed through this tutorial.

{title="Command Line: src/components/",lang="text"}
~~~~~~~~
Expand Down Expand Up @@ -92,7 +92,7 @@ const Navigation = () =>
export default Navigation;
~~~~~~~~

Now, run your application again and verify two things: The links need to show up in your browser and once you click a link the URL has to change. However, even though the URL changes, the displayed content doesn't change. Let's implement this behavior.
Now, run your application again and verify two things: The links need to show up in your browser; and once you click a link, the URL has to change. However, notice that even though the URL changes, the displayed content doesn't change. Let's implement this behavior.

In your App component, you can specify which components should show up according to corresponding routes with the help of the Route component from React Router.

Expand Down Expand Up @@ -168,7 +168,7 @@ So if a route matches a path, the respective component will be displayed. Thus a
touch Landing.js Home.js Account.js SignUp.js SignIn.js SignOut.js PasswordForget.js PasswordChange.js
~~~~~~~~

In each component, define a simple boilerplate component as functional stateless component. That's sufficient for now. These components will be filled with business logic later on. For instance, the component for the Landing page could be defined as follows.
In each component, define a simple boilerplate component as a functional, stateless component. That's sufficient for now. These components will be filled with business logic later on. For instance, the component for the Landing page could be defined as follows.

{title="src/components/Landing.js",lang=javascript}
~~~~~~~~
Expand Down