In today's digital age, applications are used for everything. From social media to online banking, so much can be done online. However, as society's reliance on online services grows, so does the need to keep personal information secure. This is where OAuth 2.0 comes in.

OAuth 2.0 is a popular protocol for both developers and users that lets you share certain information with a third-party app without providing a password. It's become the standard for many online businesses because it's secure and easy to use.

In this article, you'll learn more about OAuth 2.0 and the different ways it can be used. You'll also learn how to implement OAuth 2.0 in a React application for user authorization.

Authentication and Authorization

The first step in understanding OAuth 2.0 is understanding that while there are similarities between authentication and authorization, the two concepts are different.

Authentication is the process of verifying the identity of a user or system. Using a set of credentials, such as a username or password, authentication makes sure that users are who they say they are.

Meanwhile, authorization is the process of figuring out if an authenticated user has the right privileges to access certain resources or do certain things. It's mainly focused on figuring out what a user can do and what resources they can use based on their role or other characteristics.

Authentication and authorization are both important parts of web security. They work together to make sure that only people who are allowed to can use a system or its resources.

Now that you know how authentication and authorization work, let's dig into what OAuth 2.0 is.

What Is OAuth 2.0

OAuth 2.0, also referred to as the OAuth 2.0 Authorization Framework, is an open standard for authorization that lets users give third-party applications limited access to their web server resources without giving the applications their private credentials. OAuth 2.0 gives users more control over their data; they can selectively grant access to the applications they want to use.

For instance, OAuth 2.0 can be utilized to help users sign in to third-party applications with their Google account. This is often referred to as social login and is so common you've probably used it.

Here is a brief explanation of what occurs when you use a social login:

1. A Google sign-up button will pop up on the screen of the third-party app.
2. When you click the button, you'll be taken to Google's authorization server, where you'll be asked to sign into your Google account (if you aren't currently).
3. Google displays a consent screen after you log in, listing the permissions the third-party application is requesting (ie your public information, such as email and name).
4. Once you give your approval, Google will send you back to the app and provide it with an access token that will allow the app to access your public information.
5. The third-party app can then use the access token to make API calls to Google on your behalf as long as the requests are within the scope of the permissions you granted.

This five-step process defines the OAuth 2.0 flow or grant type. An OAuth 2.0 flow (ie an OAuth 2.0 grant type) typically defines the steps involved in getting an access token, as seen here:

By following this implicit OAuth 2.0 flow (more on this later), you can use a third-party application without giving it access to your Google credentials. You can also stop the application from using your account at any time.

Types of OAuth 2.0 Flows

OAuth 2.0 identifies a number of different grant types, or OAuth 2.0 flows, that can be used to get an access token (which is used to access a protected resource). The OAuth 2.0 flow chosen usually depends on the client application, the protected resource, and the trust between the client and the server that does the authorization.

The following are some of the most popular types of OAuth 2.0 flows:

Authorization Code Flow

In an authorization code flow, the resource owner is sent from the client application to the authorization server's authorization endpoint. Then the resource owner logs in and grants consent to the client, and is sent back to the client with an authorization code. Then the client exchanges this code for an access token.

Web applications commonly use this flow; however, it can also be used by mobile apps using the Proof Key for Code Exchange (PKCE) technique.

Implicit Flow with Form Post

The implicit flow with form post is similar to the authorization code flow but is used for browser-based client applications, especially single-page apps. In this case, instead of trading an authorization code for an access token, the authorization server gives the access token directly to the client application, as in the example flow discussed previously.

Resource Owner Password Flow

In a resource owner password flow, the resource owner already knows the client and feels comfortable giving them access to their credentials. The owner of the resource gives the client their private credentials directly, which the client then trades for an access token.

Client Credentials Flow

In the case of a client credentials flow, the client uses their own credentials to access protected resources instead of using the credentials of the resource owner. Afterward, the authorization server gives the client an access token.

OAuth 2.0 Roles

OAuth 2.0 roles define the entities in an OAuth 2.0 flow, and there are four major roles:

1. Resource owner: The user who owns the protected resource that the client application needs to access. The resource owner may be a person, a system, or a device.
2. Resource server: The server where the client wants to access a protected resource. The resource server is in charge of enforcing access controls on the protected resource.
3. Client: The third-party app that wants to access the protected resource on behalf of the resource owner. The client could be a server-based, mobile, or web application.
4. Authorization server: The server that verifies the resource owner's identity and gives access tokens to the client after the resource owner gives permission. The authorization server also checks the client's access tokens before letting them use protected resources.

Now that you have a better understanding of OAuth 2.0 and the different roles and flows, let's implement OAuth 2.0 in a React application.

Implementing OAuth 2.0 in a React Application

In this section, you'll learn how to implement an OAuth 2.0 authorization code flow in your React application. Additionally, you'll learn a less complicated approach to implementing user authorization with Clerk.

All the code for this tutorial can be found in this GitHub repo.

Prerequisites

Before you begin, you'll need Node.js version 16 or later installed on your machine. Node.js ships with npm, which you'll use to install the necessary packages.

In addition, it's recommended that you have a basic knowledge of React and JavaScript to help you complete this tutorial with ease.

OAuth 2.0 with the Standard Flow

So far, you've only learned about the various OAuth 2.0 flow types. Here, you'll implement one.

The authorization code flow is the most secure flow for web server applications, and this is how it works:

There are three main components: the authorization server, the frontend, and the backend. The final component is the resource (which is part of the backend) that only authorized users can access. In order for a user to be authorized, they must complete the authorization code flow:

1. A user goes to the authorization server from the frontend to get an authorization code.
2. The authorization code is then sent to the backend.
3. The backend verifies the authorization code by getting tokens from the authorization server.
4. The backend then authorizes the user to have access to the resource.

In this scenario, the frontend is a React application, and the backend/resource is a Node.js application. Building the authorization server is beyond the scope of this article, so instead, you'll leverage Google OAuth 2.0.

Alright, let's get started!

Get Your Google Client ID and Secret

Interacting with the authorization server to get the authorization code is the first step in the OAuth 2.0 flow. You'll need a Google client ID and secret to be able to achieve that.

Follow these steps to obtain the client ID and secret:

1. Create a new Google Cloud project.

2. Name it. In this example, it's "standard-auth".

3. Locate the More Products section on the sidebar, and click on APIs & Services and then the OAuth consent screen. Select External user type and click on CREATE. This will create a new OAuth consent screen. The OAuth consent screen tells users what app is asking for access to their information and what information the app can access:

4. Enter a name for your OAuth consent and the required email addresses; then click SAVE AND CONTINUE. At this point, you'll be shown the scope tab. Select the scopes indicated in the following image and click on the Update button to save it:

5. Add the email that you want to use to test the consent screen in the Test users section:

6. Click on APIs & Services on the sidebar again, and then select Credentials. Click on the CREATE CREDENTIALS button and then select OAuth client ID:

7. Complete the form and click on CREATE when you're done:

The redirect URI specifies where Google should navigate after the consent screen. This means that the redirect or callback has to be created on the React frontend.

8. Copy your newly created client ID and secret, and save them somewhere safe. You'll need them later when requesting an authorization code and tokens.

Implement the Node.js Backend

Now that you have your client ID and secret, it's time to implement the backend with Node.js and the Express framework.

To do so, create a new directory (ie standard-auth) to house the backend project:

1
mkdir standard-auth

Then create another directory inside it called server:

1
cd standard-auth && mkdir server

Initialize a new project within the server directory:

1
npm init esnext -y

And install the necessary packages by running this command:

1
npm install axios@1.3.4 cookie-parser@1.4.6 cors@2.8.5 dotenv@16.0.3 express@4.18.2 jsonwebtoken@9.0.0 query-string@8.1.0

Create a new .env file and add the following to it:

1
GOOGLE_CLIENT_ID=<the client ID you created earlier>
2
GOOGLE_CLIENT_SECRET=<the client secret you created earlier>
3
REDIRECT_URL=http://localhost:3000/auth/callback
4
CLIENT_URL=http://localhost:3000
5
TOKEN_SECRET=<any random string>

Update the environment variables accordingly.

Create a new server.js file, which is where the server-side code will be stored:

1
touch server.js

Add the following code to server.js to import all the necessary dependencies and create a config object:

1
import 'dotenv/config';
2
import express from 'express';
3
import cors from 'cors';
4
import axios from 'axios';
5
import queryString from 'query-string';
6
import jwt from 'jsonwebtoken';
7
import cookieParser from 'cookie-parser';
8

9
const config = {
10
  clientId: process.env.GOOGLE_CLIENT_ID,
11
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
12
  authUrl: 'https://accounts.google.com/o/oauth2/v2/auth',
13
  tokenUrl: 'https://oauth2.googleapis.com/token',
14
  redirectUrl: process.env.REDIRECT_URL,
15
  clientUrl: process.env.CLIENT_URL,
16
  tokenSecret: process.env.TOKEN_SECRET,
17
  tokenExpiration: 36000,
18
  postUrl: 'https://jsonplaceholder.typicode.com/posts'
19
};

Here, config.authUrl is a link to the OAuth consent screen. It is sent along with some query parameters to the frontend. Then a request is made to config.tokenUrl, along with some query parameters to verify an authorization code.

You need to define the parameters for both URLs by adding the following code to server.js:

1
const authParams = queryString.stringify({
2
  client_id: config.clientId,
3
  redirect_uri: config.redirectUrl,
4
  response_type: 'code',
5
  scope: 'openid profile email',
6
  access_type: 'offline',  
7
  state: 'standard_oauth',
8
  prompt: 'consent',
9
});
10
const getTokenParams = (code) => queryString.stringify({
11
  client_id: config.clientId,
12
  client_secret: config.clientSecret,
13
  code,
14
  grant_type: 'authorization_code',
15
  redirect_uri: config.redirectUrl,
16
});

Initialize a new Express app:

1
const app = express();

And add the following middlewares to resolve CORS, parse cookies, and verify authorization, respectively:

1
// Resolve CORS
2
app.use(cors({
3
  origin: [
4
    config.clientUrl,
5
  ],
6
  credentials: true,
7
}));
8

9
// Parse Cookie
10
app.use(cookieParser());
11

12
// Verify auth
13
const auth = (req, res, next) => {
14
  try {
15
    const token = req.cookies.token;
16
    if (!token) return res.status(401).json({ message: "Unauthorized" });
17
    jwt.verify(token, config.tokenSecret);
18
    return next();
19
  } catch (err) {
20
    console.error('Error: ', err);
21
    res.status(401).json({ message: "Unauthorized" });
22
  }
23
};

At this point, you can start adding endpoints for different tasks.

Add the following endpoint (/auth/url) to return the authorization URL to the frontend:

1
app.get('/auth/url', (_, res) => {
2
  res.json({
3
    url: `${config.authUrl}?${authParams}`,
4
  });
5
});

Then add another endpoint (/auth/token) that will get an authorization code from the frontend and verify it:

1
app.get('/auth/token', async (req, res) => {
2
  const { code } = req.query;
3
  if (!code) return res. status(400).json({ message: 'Authorization code must be provided' });
4
  try {
5
    // Get all parameters needed to hit authorization server
6
    const tokenParam = getTokenParams(code);
7
    // Exchange authorization code for access token (id token is returned here too)
8
    const { data: { id_token} } = await axios.post(`${config.tokenUrl}?${tokenParam}`);
9
    if (!id_token) return res.status(400).json({ message: 'Auth error' });
10
    // Get user info from id token
11
    const { email, name, picture } = jwt.decode(id_token);
12
    const user = { name, email, picture };
13
    // Sign a new token
14
    const token = jwt.sign({ user }, config.tokenSecret, { expiresIn: config.tokenExpiration });
15
    // Set cookies for user
16
    res.cookie('token', token, { maxAge: config.tokenExpiration, httpOnly: true,  })
17
    // You can choose to store user in a DB instead
18
    res.json({
19
      user,
20
    })
21
  } catch (err) {
22
    console.error('Error: ', err);
23
    res.status(500).json({ message: err.message || 'Server error' });
24
  }
25
});

If the authorization code is verified (ie exchanged for an access token successfully), a new token is signed for the current user. The signed token will then be set as a cookie that will expire based on the tokenExpiration key in the config object.

Add the /auth/logged_in endpoint to check the logged-in state of a user:

1
app.get('/auth/logged_in', (req, res) => {
2
  try {
3
    // Get token from cookie
4
    const token = req.cookies.token;
5
    if (!token) return res.json({ loggedIn: false });
6
    const { user } = jwt.verify(token, config.tokenSecret);
7
    const newToken = jwt.sign({ user }, config.tokenSecret, { expiresIn: config.tokenExpiration });
8
    // Reset token in cookie
9
    res.cookie('token', newToken, { maxAge: config.tokenExpiration, httpOnly: true,  })
10
    res.json({ loggedIn: true, user });
11
  } catch (err) {
12
    res.json({ loggedIn: false });
13
  }
14
});

Then add the /auth/logout endpoint to log out a user in session:

1
app.post("/auth/logout", (_, res) => {
2
  // clear cookie
3
  res.clearCookie('token').json({ message: 'Logged out' });
4
});

This will clear the token cookie, which invalidates a logged-in user's session.

Finally, add the resource endpoint:

1
app.get('/user/posts', auth, async (_, res) => {
2
  try {
3
    const { data } = await axios.get(config.postUrl);
4
    res.json({ posts: data?.slice(0, 5) });
5
  } catch (err) {
6
    console.error('Error: ', err);
7
  }
8
});

This basically fetches posts (resources) and returns them as a response. The middleware for validating user authorization (auth) is used here because only authorized users are allowed to access this endpoint.

Now you need to make the Express app listen on port 5000:

1
const PORT = process.env.PORT || 5000;
2

3
app.listen(PORT, () => console.log(`🚀 Server listening on port ${PORT}`));

Implement the React Frontend

The easiest way to start a React project is to use boilerplate code. Go to the standard-auth directory and bootstrap a new React project using Create React App:

1
npx create-react-app client

This will create a client directory with your React project inside it.

Change to the client directory using cd client and install the following packages:

1
npm install axios@1.3.4 react-router-dom@6.9.0

Next, create a .env file in the root directory of your React project:

1
echo REACT_APP_SERVER_URL = http://localhost:5000 > .env

Open the App.css file in the src directory of your React project and add the following CSS code:

1
.btn { 
2
  border-radius: 100rem;
3
  padding: 12px 16px;
4
  background: linear-gradient(170deg, #61DBFB, #2e849b) !important;
5
  width: 10rem;
6
  border: none;
7
  color: white;
8
  font-weight: 600;
9
  margin: 1rem 0;
10
  cursor: pointer;
11
}

This will help style a button using the btn class.

Update your App.js file to import the necessary method and hooks by adding the following code just above the App component:

1
import { RouterProvider, createBrowserRouter, useNavigate } from 'react-router-dom';
2
import axios from 'axios';
3
import { useEffect, useRef, useState, createContext, useContext, useCallback } from 'react';
4

5
// Ensures cookie is sent
6
axios.defaults.withCredentials = true;
7

8
const serverUrl = process.env.REACT_APP_SERVER_URL;

After updating the App.js file, you need to create a new React context to hold the logged-in and user states so they can be shared globally. To do so, add the following code just above the App component:

1
const AuthContext = createContext();
2

3
const AuthContextProvider = ({ children }) => {
4
  const [loggedIn, setLoggedIn] = useState(null);
5
  const [user, setUser] = useState(null);
6

7
  const checkLoginState = useCallback(async () => {
8
    try {
9
      const { data: { loggedIn: logged_in, user }} = await axios.get(`${serverUrl}/auth/logged_in`);
10
      setLoggedIn(logged_in);
11
      user && setUser(user);
12
    } catch (err) {
13
      console.error(err);
14
    }
15
  }, []);
16

17
  useEffect(() => {
18
    checkLoginState();
19
  }, [checkLoginState]);
20

21
  return (
22
    <AuthContext.Provider value={{ loggedIn, checkLoginState, user }}>
23
      {children}
24
    </AuthContext.Provider>
25
  );
26
}

The checkLoginState function in this React context makes a call to your backend's /auth/logged_in endpoint. Here, it's called in a useEffect block to run every time the app initially renders.

Next, add the following Dashboard component just before the App component:

1
const Dashboard = () => {
2
  const { user, loggedIn, checkLoginState } = useContext(AuthContext);
3
  const [posts, setPosts] = useState([]);
4
  useEffect(() => {
5
    (async () => {
6
      if (loggedIn === true) {
7
        try {
8
          // Get posts from server
9
          const { data: { posts } } = await axios.get(`${serverUrl}/user/posts`)
10
          setPosts(posts);
11
        } catch (err) {
12
          console.error(err);
13
        }
14
      }
15
    })();
16
  }, [loggedIn])
17

18
  const handleLogout = async () => {
19
    try {
20
      await axios.post(`${serverUrl}/auth/logout`);
21
      // Check login state again
22
      checkLoginState();
23
    } catch (err) {
24
      console.error(err);
25
    }
26
  }
27

28
  return (
29
    <>
30
      <h3>Dashboard</h3>
31
      <button className="btn" onClick={handleLogout} >Logout</button>
32
      <h4>{user?.name}</h4>
33
      <br />
34
      <p>{user?.email}</p>
35
      <br />
36
      <img src={user?.picture} alt={user?.name} />
37
      <br />
38
      <div>
39
        {posts.map((post, idx) => <div>
40
          <h5>{post?.title}</h5>
41
          <p>{post?.body}</p>
42
        </div>)}
43
      </div>
44
    </>
45
  )
46
}

Later, you'll render this component conditional based on the logged-in state of a user.

Add the Login component:

1
const Login = () => {
2
  const handleLogin = async () => {
3
    try {
4
      // Gets authentication url from backend server
5
      const { data: { url } } = await axios.get(`${serverUrl}/auth/url`);
6
      // Navigate to consent screen
7
      window.location.assign(url);
8
    } catch (err) {
9
      console.error(err);
10
    }
11
  }
12
  return <>
13
  <h3>Login to Dashboard</h3>
14
  <button className="btn" onClick={handleLogin} >Login</button>
15
  </>
16
}

This component renders a button that takes the user to the OAuth consent screen you made earlier.

Do you remember when you provided a callback URL when you created your client ID and secret? Because of this, you need to add a component to handle the callback:

1
const Callback = () => {
2
  const called = useRef(false);
3
  const { checkLoginState, loggedIn } = useContext(AuthContext);
4
  const navigate = useNavigate();
5
  useEffect(() => {
6
    (async () => {
7
      if (loggedIn === false) {
8
        try {
9
          if (called.current) return; // prevent rerender caused by StrictMode
10
          called.current = true;
11
          const res = await axios.get(`${serverUrl}/auth/token${window.location.search}`);
12
          console.log('response: ', res);
13
          checkLoginState();
14
          navigate('/');
15
        } catch (err) {
16
          console.error(err);
17
          navigate('/');
18
        }
19
      } else if (loggedIn === true) {
20
        navigate('/');
21
      }
22
    })();
23
  }, [checkLoginState, loggedIn, navigate])
24
  return <></>
25
};

Create a router to define routes that render the components you created earlier:

1
const Home = () => {
2
  const { loggedIn } = useContext(AuthContext);
3
  if (loggedIn === true) return <Dashboard />;
4
  if (loggedIn === false) return <Login />
5
  return <></>;
6
}
7

8
const router = createBrowserRouter([
9
  {
10
    path: '/',
11
    element: <Home />,
12
  },
13
  {
14
    path: '/auth/callback', // google will redirect here
15
    element: <Callback />,
16
  }
17
]);

Finally, update the App component with the following code:

1
function App() {
2
  return (
3
    <div className="App">
4
      <header className="App-header">
5
        <img src={logo} className="App-logo" alt="logo" />
6
        <AuthContextProvider>
7
          <RouterProvider router={router} />
8
        </AuthContextProvider>
9
      </header>
10
    </div>
11
  );
12
}

Now, it's time to test out the implementation. Go to your server directory and run the following command to spin up the server:

1
node server.js

Open another terminal in your client directory and run this command to spin up your React server:

1
npm start

This command will open up http://localhost:3000 in your default browser. You should see something like this when the server is fully running:

If you click on the login button, you'll be redirected to the OAuth consent screen:

After you're redirected, you'll be logged in and authorized to access the post resources:

If you've followed along, you've officially implemented the OAuth 2.0 authorization code flow in React. Great work!

Authorization with Clerk

As you can see, implementing OAuth 2.0 is complicated and time-consuming. This is where Clerk can help.

Clerk is a service that takes care of user management. This means developers don't have to keep reinventing the wheel and can focus on what they do best. Moreover, Clerk can also take care of authorization.

In this section, you'll see how Clerk can easily be used to replicate the implementation in the previous section.

Before you proceed, you need to have a Clerk account. An account will give you access to both a publishable key and a secret key, as well as other customizations.

If you don't already have an account, go to Clerk's sign-up page and create one:

After you've signed up, click on Add application to create a new project:

Update the settings for your new application to match the settings shown here:

When you're done, click on FINISH, and a new application will be created.

Navigate to the API Keys section. Copy your publishable and secret keys, and save them somewhere safe:

Implement the Node.js Backend

For this Clerk example, you need to rewrite the Node.js implementation you did previously. Update your .env file in the server directory with the following:

1
CLERK_SECRET_KEY=<the secret key you copied from your Clerk account>

Update the environment variable accordingly.

Then run the following command in your server directory to install Clerk's Node.js SDK:

1
npm install @clerk/clerk-sdk-node@4.7.11

Update your server.js file with the following code:

1
import 'dotenv/config';
2
import express from 'express';
3
import cors from 'cors';
4
import axios from 'axios';
5
import { ClerkExpressRequireAuth } from '@clerk/clerk-sdk-node';
6

7
const config = {
8
  postUrl: 'https://jsonplaceholder.typicode.com/posts',
9
  clerkSecretKey: process.env.CLERK_SECRET_KEY, // Clerk automatically picks this from the env
10
};
11

12
const app = express();
13

14
app.use(cors());
15

16
app.get('/user/posts', ClerkExpressRequireAuth(), async (req, res) => {
17
  console.log('REQUEST AUTH: ', req.auth);
18
  try {
19
    const { data } = await axios.get(config.postUrl);
20
    res.json({ posts: data?.slice(0, 5) });
21
  } catch (err) {
22
    console.error('Error: ', err);
23
  }
24
});
25

26
const PORT = process.env.PORT || 5000;
27

28
app.listen(PORT, () => console.log(`🚀 Server listening on port ${PORT}`));

Here, you're using the ClerkExpressRequireAuth() middleware to allow only authorized access to the /user/posts/ route. It's that easy!

Implement the React Frontend

To implement the React frontend, update the .env file in your client directory with the following:

1
REACT_APP_CLERK_PUBLISHABLE_KEY=<the publishable key you copied from your Clerk account>
2
REACT_APP_SERVER_URL = http://localhost:5000

Remember to update the environment variable accordingly.

Then run the following command in the client directory to install the Clerk React SDK:

1
npm install @clerk/clerk-react@4.12.4

Update the App.js file inside the src directory in your client directory with the following code:

1
import logo from './logo.svg';
2
import './App.css';
3
import { ClerkProvider, SignedIn, SignedOut, UserButton, RedirectToSignIn, useAuth }  from '@clerk/clerk-react';
4
import { useState, useEffect } from 'react';
5
import axios from 'axios';
6

7
const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;
8
const serverUrl = process.env.REACT_APP_SERVER_URL;
9

10
const Dashboard = () => {
11
  const [posts, setPosts] = useState([]);
12
  const { getToken } = useAuth();
13

14

15
  useEffect(() => {
16
    (async () => {
17
      try {
18
        const token = await getToken();
19
        console.log('token: ', token)
20
        // Get posts from server
21
        const { data: { posts } } = await axios.get(`${serverUrl}/user/posts`, {
22
          headers: { Authorization: `Bearer ${token}` }
23
        })
24
        setPosts(posts);
25
      } catch (err) {
26
        console.error(err);
27
      }
28
    })();
29
  // eslint-disable-next-line react-hooks/exhaustive-deps
30
  }, [])
31

32
  return (
33
    <>
34
      <h3>Dashboard</h3>
35
      <UserButton />
36
      <div>
37
        {posts.map((post, idx) => <div>
38
          <h5>{post?.title}</h5>
39
          <p>{post?.body}</p>
40
        </div>)}
41
      </div>
42
    </>
43
  )
44
}
45

46
function App() {
47
  return (
48
    // Don't forget to pass the publishableKey prop
49
    <ClerkProvider publishableKey={clerkPubKey}>
50
      <div className="App">
51
        <header className="App-header">
52
          <img src={logo} className="App-logo" alt="logo" />
53
          <SignedIn>
54
            <Dashboard />
55
          </SignedIn>
56
          <SignedOut>
57
            <RedirectToSignIn />
58
          </SignedOut>
59
        </header>
60
      </div>
61
    </ClerkProvider>
62
  );
63
}
64

65
export default App;

Clerk's React SDK exports prebuilt components that are very useful. For instance, the SignedIn component renders its children (in this case, the Dashboard component) only when a user is signed in. The SignedOut component does the opposite.

The RedirectToSignIn component redirects the users to a form where they can choose their authentication method. In this case, the users will be prompted to use their Google account or email address (you set this when creating your Clerk application).

The Dashboard component makes a request to get post resources using the token provided by the useAuth hook from the Clerk SDK.

If you go through the sign-up process, you'll end up with something like this:

Standard Authorization vs. Clerk

As you can see, implementing a standard and secure authorization can be difficult, time-consuming, and in some cases, unnecessary. However, you can solve these issues with Clerk, which can help you implement user authentication and authorization with ease.

Clerk does this by providing a range of authentication methods, including social login, password-based, and multifactor authentication. It also gives developers access to a user interface where they can control their applications' authentication and user management settings. Moreover, analytics and reporting capabilities are available to developers to help them keep track of user behavior. Sign up to try Clerk today.