bradm blog SEO updates (#2496)

Co-authored-by: Brad McCarty <brad.mccarty@fusionauth.io>

astro/src/content/blog/how-to-authenticate-your-react-app.mdx

@@ -28,29 +28,29 @@ We'll start with downloading and configuring FusionAuth, then create a login/log
 *Please Note:* This tutorial reworks an earlier tutorial on implementing OAuth in React, which can be found [here](/blog/2020/03/10/securely-implement-oauth-in-react).
 </Aside>
 
-## What is authentication?
+## What Is Authentication?
 
 You use authentication every day, whether you realize it or not. Every time you log in to a website, you have authenticated. Every time you use Facebook or Google to sign on to another service, you have used authentication. As a React developer, you most likely write web apps with a login or sign up feature. Then you display certain data based on the user's credentials. All of this functionality makes heavy use of authentication. But what exactly is authentication?
 
 In short, authentication is the process of a client proving that they are who they say they are to an external server so that they can access resources specific to them. Think of it like showing a passport to a customs agent to visit another country. In order to enter, you must present valid proof from your country’s government that verifies you are who you say you are. Standards such as OAuth 2.0 and OIDC give you a digital passport. Components of this system include tokens, which are passed around, authorization servers, and resource servers. Only once that user is verified are they allowed to access the resource they want, such as an online bank account, social media homepage, or email.
 
-## What is authorization?
+## What Is Authorization?
 
 While authentication is proving you are who you say you are, authorization is the process of allowing a user to access only certain things.  Back to the passport analogy: a traveler may present a passport to a customs agent that proves they are who they say they are, and they may have an extra stamp in their passport that proves they are a diplomat or a journalist. Because of those certain stamps, they can now enter zones that are off-limits to regular travelers, such as conflict areas or diplomatic buildings. In a similar fashion, if a user is an admin, they can access certain parts of that website that a regular user cannot.  An auth server, such as FusionAuth, is a server that can both authenticate and authorize users.
 
 While it is possible to write your own solution, it is often best to use an open source tool or external service like FusionAuth, as this component is surprisingly complex and requires a decent amount of maintenance. If you are not able to dedicate a good amount of developer hours and knowledge to maintaining your auth workflows, they can be exploited with resulting data loss. You can also use an external 'identity provider', which is a way of authenticating users with an external trusted service such as Facebook, Google, or Spotify. However, setting up such a connection is outside the scope of this tutorial.
 
-## What is the OAuth 2.0 Authorization Code grant?
+## What Is The OAuth 2.0 Authorization Code grant?
 
 This is the grant we are going to use to authenticate our users.  In this particular grant, FusionAuth generates and passes validated access tokens to the React app, which then presents those tokens to the Express backend to gain access to the requested resources. The tokens are never stored on the browser, but are instead stored on the server. This is called the "backend for frontend" pattern, or BFF. If you want to learn more, take a look at our [Modern Guide to OAuth](/learn/expert-advice/oauth/modern-guide-to-oauth)
 
 Using an Authorization Code grant has many advantages, including being more secure than alternatives such as the Implicit grant.  Whereas an Implicit grant authenticates against FusionAuth but exposes the resulting Access Token in the URL, the Authorization Code grant adds an extra layer of security by exchanging an Authorization Code for an Access Token before the user can gain access to their resources.  To see a deep dive into this grant that is language-agnostic, take a look at our [example Authorization Code grant](/docs/v1/tech/oauth/#example-authorization-code-grant).
 
-## What is FusionAuth?
+## What Is FusionAuth?
 
 <WhatIsFusionAuth />
 
-## Before you begin
+## Before You Begin
 
 There are a few things that you need to have in place before you get started:
 
@@ -82,7 +82,7 @@ Instead of manually setting up FusionAuth using the admin UI, you can use Kickst
 
 You'll need to edit that Kickstart file and update the application name, API Key, and redirect URLs with your specific app's data.
 
-### Manual configuration
+### Manual Configuration
 
 If you choose not to use kickstart, you must configure an application in FusionAuth as well as link the user account with which you’ll log in.
 
@@ -106,7 +106,7 @@ This is what your configuration might look like:
 
 Congratulations! You have configured FusionAuth to work with your React app. Now, let's set up the user who will actually log in.
 
-### Create a User and Register Them
+### Create A User And Register Them
 
 For the next step, we will link a user to your brand-new FusionAuth app, "React Auth", via the dashboard. This is where another useful feature of FusionAuth comes into play, as a "User Data Store". This is a centralized location where you can manage all the users of your app in a friendly UI environment. Of course, you can register users with FusionAuth from your React app if you want to build that functionality later on, but that is beyond this tutorial's scope.
 
@@ -126,7 +126,7 @@ To create a user:
 
 Well done! You now have at least one user that is registered to your "React Auth" app. Not bad for your app being in development.
 
-## Create the React UI
+## Create The React UI
 
 ### Set up the project folders and configuration
 
@@ -256,11 +256,11 @@ Here is what the page you will get this info from looks like:
 
 ![details of the react application in FusionAuth](/img/blogs/fusionauth-example-react-2021/config-file.png)
 
-### Generate an API key
+### Generate An API Key
 
 You also will need to generate an API key. To do so, navigate to "Settings" and click on "API Keys" and click the green "+" button to add an API key. You can leave the Id field blank, FusionAuth will auto-generate an Id for you. For now, don't select any endpoint methods to create this as a super user key, which has access to all endpoints.  Then click on the green "view" (spyglass) button and copy your api key into your `config.js` file as well.
 
-### Complete the config file
+### Complete The Config File
 
 Here's a completed config file you can use as a template. But remember, you must paste in your own application's unique values!
 
@@ -282,7 +282,7 @@ module.exports = {
 };
 ```
 
-### Write the React application
+### Write The React Application
 
 Now, we're going to write the React frontend.
 
@@ -404,13 +404,13 @@ Fantastic!  We've confirmed a user can have a message displayed to them based on
 
 First, we need to set up that server!
 
-## Create the Express server
+## Create The Express Server
 
 *"Wait", you may say, "remind me, why do I need an Express server? This is a SPA, after all..."*
 
 You need an Express server because of how we are handling authentication, with the Authorization Code grant. This grant relies on a user interacting with a browser, but still needs a server-side component to handle passing tokens and authorization codes to and from the authorization server, aka FusionAuth.  This keeps all of your sensitive access objects on the server-side of your app, and makes them far less likely to be intercepted and hacked.  If you want to learn more about the nuts and bolts of how the Authorization Code grant works, check out the [Modern Guide to OAuth](/learn/expert-advice/oauth/modern-guide-to-oauth).
 
-### Configure the folders and packages
+### Configure The Folders And Packages
 
 Now, you need to add a package.json in your `server` folder. Do that by navigating to the `server` folder and running:
 
@@ -469,7 +469,7 @@ You will then want to start your server:
 npm start
 ```
 
-### Write the Express server
+### Write The Express Server
 
 We need to create some routes for our Express server to use.
 
@@ -633,7 +633,7 @@ app.use(cors({
 
 Awesome! So if you go to `localhost:3000`, you should see the user displayed! Now let's make it dynamic with an actual login/logout!
 
-## Logging in
+## Logging In
 
 User sign-in is one of the key features of FusionAuth. Let’s see how it works.
 
@@ -879,7 +879,7 @@ When you successfully authenticate, you’ll just see `Cannot GET /oauth-callbac
 
 But why specify this? Because without specifying where to send the app after authenticating, a bad actor could put in their own redirect URL, sending the browser to their malicious server and gaining access to a token that could be used to view resources as a user. That would be no good!
 
-## Exchange the Authorization Code for an Access Token
+## Exchange The Authorization Code For An Access Token
 
 An Authorization Code isn’t enough to access the user’s resources, though. For that, we need an Access Token. This is standard OAuth, not something unique to FusionAuth. This step is called the Code Exchange, because we send the auth code to FusionAuth’s `/token` endpoint and receive an Access Token in exchange.  Then that Access Token is passed to the resource server in exchange for the desired resources.
 
@@ -1006,7 +1006,7 @@ app.use(session(
 
 
 
-##  Displaying user data
+##  Displaying User Data
 Our React app looks for a user in `/user`. The Access Token that is granted to our Express server from FusionAuth isn’t human-readable, but we can pass it to FusionAuth’s `/introspect` endpoint to get a User Object (JSON like we showed earlier) from it. It's like saying 'Hey FusionAuth, you gave us this access token and so we can use that to access a user's data from you, because you trust your own access tokens.'
 
 We can get additional user-specific info from the `/api/user/registration` endpoint as well, which is a FusionAuth specific API.  Then we can display whatever we want to the end user based on that user object (well, anything that the object gives us access to) which is what we are going to do now.
@@ -1171,7 +1171,7 @@ FusionAuth has made troubleshooting easy. If you’ve missed a setting in your O
 
 You might find that after a restart or a long time between logins, your FusionAuth instance will log out. When that happens, clicking the login on your login form will add an additional step for you to log into your FusionAuth instance again so that it can access the needed credentials.
 
-## Take it further
+## Take It Further
 
 Some areas that you may want explore further::
   - Using PKCE (pronounced 'Pixie') to give an additional layer of security to your React app's login workflows.