andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

This in-depth guide shows you how to secure your AI chatbot built with .NET Blazor using the RAG pattern, ensuring users can only access information from documents they have permission to view.

Secure a .NET RAG System with Auth0 FGA

william_johnson

  Will Johnson is a Developer Advocate at Auth0. He loves teaching topics in a digestible way to empower more developers. He writes blog posts, records screencasts, and writes eBooks to help developers. He's also an instructor on <a target='_blank' rel='noopener noreferrer' href='https://egghead.io'><strong><b>egghead.io</b></strong></a>.


Developer Advocate

Will Johnson

Connect your Auth0-secured Model Context Protocol (MCP) server to ChatGPT. Learn how to enable Developer Mode, configure custom connectors, authorize connections with Auth0 Universal Login, and interacting with your API in chat.

Integrate Your Auth0 Secured Remote MCP Server in ChatGPT Developer Mode

jess-author

Jessica Temporal is a Senior Developer Advocate at Auth0 and co-founder of the first Brazilian data science podcast called <a target='_blank' href='https://pizzadedados.com'><strong>Pizza de Dados</strong></a>. She’s the author of <a target='_blank' href='https://www.amazon.com/dp/B0CDNX6NS7/ref=sr_1_1?&_encoding=UTF8&tag=jesstempora0e-20&linkCode=ur2&linkId=efc4229f6b816609dfce4f185781d99a&camp=1789&creative=9325' ><strong>The Big Git Microbook</strong></a>, creator of <a target='_blank' href='https://gitfichas.com/en'><strong>GitFichas.com</strong></a>, and a part of <a target='_blank' href='https://www.linkedin.com/learning/instructors/jessica-temporal'><strong>LinkedIn Learning</strong></a> instructors team. Jessica helped develop the AI that identifies possible unlawful expenses from Brazilian politicians. She is part of the PyLadies initiative that works to improve diversity and inclusion in technology. In her free time, she likes to knit, play video games, use her 3D printer, and is learning to create 3D models.

Sr. Developer Advocate

Jessica Temporal

Turn a blog into a searchable knowledge base for your AI assistant. Follow this step-by-step guide to build a local MCP server in Python, giving an MCP client the ability to interact with a blog without you ever having to leave the chat

How to Build a Python MCP Server to Consult a Knowledge Base

joey devilla headshot 900px

I’m a Senior Developer Advocate at Auth0, and I like to work on various technologies. I’ve developed software for all sorts of platforms, from CD-ROM and the PalmPilot to my current area of focus, mobile phones, IoT devices, and AI. When I’m not looking for strange new platforms to write software for, I’m playing a strange old instrument — the accordion!

Senior Developer Advocate

Joey deVilla

We asked ChatGPT to write code to integrate Auth0 into an Android app after its initial release. The code didn’t work then. Will it work this time?

ChatGPT Tries to Add Auth0 Authentication to an Android App, Round Two!

We asked ChatGPT to write code to integrate Auth0 into an iOS app after its initial release. The code didn’t work then. Will it work this time?

## What Happened in Round One

Barely two weeks after the initial release of ChatGPT, I tidied up my home office/studio, put on my newest Aloha shirt, and started asking the newly-released AI some questions about OAuth and Auth0. The result was the video below, which you’ll find on the OktaDev YouTube channel: _Chatting with ChatGPT About Auth0:_

<iframe width="600" height="338" src="https://www.youtube.com/embed/rfkgdorO-8Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

ChatGPT gave correct answers to these questions:

- “What is OAuth?” and a follow-up question where I asked it for a more layperson-friendly version of its initial answer.
- “What is OIDC?” and the same follow-up question as my previous one.
- What is an ID token?
- What is an access token?
- What is a refresh token?
- Are there security downsides to using refresh tokens with indefinite lifespans?

ChatGPT didn’t do as well when I asked it, “How do I write an iOS app that uses Auth0 for login?” The set of steps it suggested was correct, but it said that I should use the  `Auth0.authentication()` method to make the Universal Login screen appear. **No such method exists**.


## And Now, Round Two! 

Half a year has passed since I asked ChatGPT about adding Auth0 authentication to an iOS app. Over that period, OpenAI’s developers added a newer model, GPT 4.0, which you can access only if you have a paid account. They also made adjustments and improvements to the original GPT 3.5 model, which powers the free version of ChatGPT.

I decided to see if the free version of ChatGPT could give me a working iOS authentication code this time. I asked it **“How do I write an iOS app that uses Auth0 for login and logout?”**

Here’s ChatGPT’s response, which I’ve condensed slightly for brevity:

1. Set up an Auth0 account.
2. Create an iOS project. Set it up with the desired UI and navigation flow for the login and logout functionality.
3. Install the Auth0 SDK. You can use CocoaPods or Swift Package Manager to install the SDK dependencies.
4. Configure your Auth0 application by providing the necessary settings, such as allowed callback URLs and logout URLs.
5. Implement login functionality: Create a login view controller or integrate the login functionality into an existing view controller. Use the Auth0 SDK to initiate the login process by presenting the Auth0 login screen. The user will be able to enter their credentials or choose a social login option.
6. Handle login callback: Once the user successfully logs in, Auth0 will redirect them back to your app. You need to implement the callback handling in your app to receive the authentication result. This typically involves handling a URL scheme or Universal Link that Auth0 uses to redirect back to your app.
7. Store and manage tokens: When the login is successful, Auth0 provides an access token and, optionally, a refresh token. You'll need to store these tokens securely, such as using the iOS Keychain, and handle token refreshing when necessary.
8. Implement logout functionality: Create a logout function that clears the stored tokens and logs out the user. You can use the Auth0 SDK to perform the logout operation.
9. Secure API requests: To secure your app's API requests, include the access token in the authorization header when making requests to your backend services. Ensure that your backend verifies the authenticity of the token with Auth0.
10. Test and refine: Thoroughly test your app's login and logout functionality to ensure it works as expected. Make any necessary refinements or enhancements based on user experience and feedback.

I then asked **“Could you show me some Swift code that uses Auth0 for login and logout?”**

Its response: “Certainly! Here's an example of Swift code that demonstrates how to use Auth0 for login and logout in an iOS app,” followed by this code:

```swift
import Auth0

class Auth0Manager {
    let auth0 = Auth0.webAuth(clientId: "YOUR_CLIENT_ID", domain: "YOUR_DOMAIN")

    func login(completion: @escaping (Error?) -> Void) {
        auth0
            .scope("openid profile")
            .audience("https://YOUR_API_IDENTIFIER")
            .start { result in
                switch result {
                case .success(let credentials):
                    // Successful login
                    let accessToken = credentials.accessToken
                    let idToken = credentials.idToken
                    // Store the tokens securely

                    completion(nil)

                case .failure(let error):
                    // Handle error
                    completion(error)
                }
            }
    }

    func logout() {
        auth0.clearSession(federated: true) { result in
            switch result {
            case .success:
                // Successful logout
                // Clear stored tokens and any other user data

            case .failure(let error):
                // Handle error
                print("Logout error: \(error)")
            }
        }
    }
}
```

My thought was probably what you’re thinking right now: _Does this code work?_

I opened a copy of the iOS project I use for demonstrating Auth0 authentication, which is based on the Auth0 iOS Quickstart app (you can [download a version configured with your Auth0 tenant settings](https://auth0.com/docs/quickstart/native/ios-swift/01-login) or [get it from this Github repository](https://github.com/auth0-samples/auth0-ios-swift-sample/tree/master/Sample-01)). I added a new file to the project, `Auth0Manager.swift`, and pasted the class that ChatGPT generated there. I replaced these placeholder values...

- `YOUR_CLIENT_ID` with my app’s client ID
- `YOUR_DOMAIN`with my tenant’s domain
- `YOUR_API_IDENTIFIER` with `https://YOUR_DOMAIN/api/v2/`, replacing `YOUR_DOMAIN` with my tenant’s domain

…and replaced my demo app’s calls to its original `login()` and `logout()` methods with calls to the versions that ChatGPT provided.

I ran the app...

...and it worked! It appears that this time, ChatGPT — and the _free_ version at that — got it right.


## A Closer Look At ChatGPT’s Code

Now that it’s clear that ChatGPT now knows how to write code to integrate Auth0 into an iOS app let’s take a look at the way it did this.

<img src="https://images.ctfassets.net/23aumh6u8s0i/2g2IgpFO8E6hNzFAwaDfdc/e2042210acd1c1b96f3c4629001a5d39/gavel.png" align="left" style="padding: 20px;" alt="Judge’s gavel resting on a hardcover book." />To make this exercise a little more fun, I’ll keep a running score where I’ll award points for what I thought were good things that ChatGPT did and deduct points for things that I thought were bad ones. Watch for the picture of the gavel for these scores.


### The Auth0Manager class

This is different from a lot of [tutorial code](https://auth0.com/blog/get-started-ios-authentication-swift-uikit/), which puts the Auth0 logic and data — the`login()` and `logout()` methods as well as the variables to hold the tokens that Auth0 returns —  inside the view object that makes the call to display the Universal Login screen or log the user out. Many tutorials take this approach because it shows all the code in a single file, which is useful when you’re trying to explain something new to the reader.

In a _real_ iOS app (as opposed to a tutorial app), you’d probably take the same approach as ChatGPT’s and put the authentication and authorization code in its own class. In fact, [that’s what we do in tutorials showing how to integrate Auth0 into Android apps](https://auth0.com/blog/add-progressive-profiling-auth0-authentication-android-apps-jetpack-compose/) since they rely heavily on ViewModels that inherit from Android’s built-in `ViewModel` class.

<img src="https://images.ctfassets.net/23aumh6u8s0i/2g2IgpFO8E6hNzFAwaDfdc/e2042210acd1c1b96f3c4629001a5d39/gavel.png" align="left" style="padding: 20px;" alt="Judge’s gavel resting on a hardcover book." />I’ve decided to follow ChatGPT’s example and put Auth0 code in its own class in my tutorials from now on to make my tutorial code a little closer to real-world code. For this idea, I’ll award ChatGPT 1 point.


### The WebAuth instance

ChatGPT’s `Auth0Manager` class has a single property, `auth0`, a `WebAuth` instance whose definition is as follows:

```swift
let auth0 = Auth0.webAuth(clientId: "YOUR_CLIENT_ID", domain: "YOUR_DOMAIN")
```

`Auth0.webAuth()` is a function in the _Auth0.Swift_ library that creates an instance of the `WebAuth` class, which provides the necessary methods for logging a user in and out. Both the `login()` and `logout()` methods use this instance.

ChatGPT’s solution uses the version of `Auth0.webAuth()` that takes two arguments: the client ID and the domain. It’s the most straightforward way to show how you can use Auth0 to implement login and logout in an app, but you probably wouldn’t do this in a production application since you’d be hard-coding server credentials.

Fortunately, there’s another form of `Auth0.webAuth()` that _doesn’t_ take arguments for the client ID and domain. In fact, it doesn’t take _any_ arguments, and you’d use it like this:

```swift
let auth0 = Auth0.webAuth()
```

Instead of relying on arguments that you pass to it, this form of `Auth0.webAuth()` looks through the app’s property lists (a.k.a. _plists_) for values corresponding to the following keys:

- `ClientId` for the client ID
- `Domain` for the tenant domain

You would typically create a new property list — usually named `Auth0.xml` — and store the `ClientID` and `Domain` values there. Here’s what it would look like in an Xcode project if you prefer editing property lists visually...

![auth0_plist](https://images.ctfassets.net/23aumh6u8s0i/6LexUyPkhqCzEvMCASpR37/246ed1182fd7d410cebaca9c4a6d01b0/auth0_plist.png)

...and here’s how it would look if you prefer editing property lists as source code:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Domain</key>
    <string>** Put your tenant’s domain here ***</string>
    <key>ClientId</key>
    <string>** Put your app’s client ID here ***</string>
</dict>
</plist>
```

Putting the client ID and domain values in their own file makes it easy to exclude them from version control, which makes it less likely that you’ll unintentionally share these values with people outside your organization.

<img src="https://images.ctfassets.net/23aumh6u8s0i/2g2IgpFO8E6hNzFAwaDfdc/e2042210acd1c1b96f3c4629001a5d39/gavel.png" align="left" style="padding: 20px;" alt="Judge’s gavel resting on a hardcover book." />ChatGPT’s implementation works when trying to explain how to implement something, which earns it 1 point. However, its implementation isn’t one that you should use in a production application, and it should have explained this fact, so I’m deducting the point I just gave it. ChatGPT’s current score is holding at 1 point.


### The login() method

Let’s take a look at ChatGPT’s `login()` method:

```swift
func login(completion: @escaping (Error?) -> Void) {
    auth0
        .scope("openid profile")
        .audience("https://YOUR_API_IDENTIFIER")
        .start { result in
            switch result {
            case .success(let credentials):
                // Successful login
                let accessToken = credentials.accessToken
                let idToken = credentials.idToken
                // Store the tokens securely

                completion(nil)

            case .failure(let error):
                // Handle error
                completion(error)
            }
        }
}
```

Its `login()` implementation is mostly the same as the `login()` methods in our tutorials or our iOS Quickstart app. There’s the usual method chaining from the `webAuth` instance, where the methods are called in this order:

- `scope()` to request the minimum amount of scopes necessary to authenticate a user:
    -   `openid` to indicate that we want to use OpenID Connect (OIDC) to verify the user’s identity. Since Auth0 authentication is OIDC-based, Any application using Auth0 must request this scope.
    -  `profile` to retrieve the user’s name.
    -  The ChatGPT code doesn’t include a request for the `email` scope, which I would recommend, simply for access to the user’s email address, which is typically how an app would send out-of-band communications to the user.
-  `audience()` to specify one or more APIs that the access token that Auth0 returns should grant access to. In the rare case that you’re using Auth0 for authentication only, you can skip this method call. In my case, I passed it the string `https://MY_DOMAIN/api/v2/`, replacing `MY_DOMAIN` with my tenant’s domain. This is the URL for the Auth0 user management API, which is useful for accessing the user’s app and user metadata.
- `start()` to indicate what the app should do in the cases where the user was able to log in and where they weren’t.

The big difference between ChatGPT’s implementation of `login()` and the ones we’ve been using here on the Auth0 blog and in our Quickstarts can be seen in the `login()` method’s signature:

```swift
func login(completion: @escaping (Error?) -> Void)
```

ChatGPT’s version of `login()` has a parameter, `completion`, that takes an argument of type `(Error?) -> Void`. This argument is a closure that takes an argument of type `Error?` (a value whose type is `Error`, a subclass of `Error`, or `nil`) and does not return a value. The `@escaping` annotation informs Swift that the closure provided to `login()` might [outlive or go beyond `login()`’s scope](https://www.donnywals.com/what-is-escaping-in-swift/).

The `completion` parameter allows the code that calls `login()` to perform additional actions upon successful login and also in case login fails:

- If the user logged in successfully, `login()` calls `completion(nil)`.
- If the user’s attempt to log in failed, `login()` calls `completion(error)`, where `error` is the `Error` instance returned by `start()` method of the `WebAuth` instance contained in the `auth0` property.

The code calling `login()` must provide a closure argument that specifies what extra actions should happen whether the login succeeds or fails. For example, here’s the code in my demo app that calls `Auth0NManager`’s `login()` method:

```swift
auth0Manager.login() { error in
    if let error = error {
        print("Login error!")
        isAuthenticated = false
    } else {
        print("Login successful!")
        isAuthenticated = true
    }
}
```

<img src="https://images.ctfassets.net/23aumh6u8s0i/2g2IgpFO8E6hNzFAwaDfdc/e2042210acd1c1b96f3c4629001a5d39/gavel.png" align="left" style="padding: 20px;" alt="Judge’s gavel resting on a hardcover book." />I like ChatGPT’s addition of the <code>completion</code> parameter and feel no shame in stealing this idea (is it even possible to steal from an AI?). I’m granting ChatGPT 1 point, resulting in a total of 2 points so far.


### The logout() method

Here’s ChatGPT’s `logout()` method:

```swift
func logout() {
    auth0.clearSession(federated: true) { result in
        switch result {
        case .success:
            // Successful logout
            // Clear stored tokens and any other user data
            print("Logged out!")
            
        case .failure(let error):
            // Handle error
            print("Logout error: \(error)")
        }
    }
}
```

ChatGPT’s implementation of the `logout()` method is pretty much the same as the `logout()` methods in our tutorials or our iOS Quickstart app.

I would steal ChatGPT’s trick from its `login()` method and add a `completion` parameter that takes a closure that performs additional actions for both successful and unsuccessful logouts. My implementation would look something like this:

```swift
func logout(completion: @escaping (Error?) -> Void) {
    auth0.clearSession(federated: true) { result in
        switch result {
        case .success:
            // Successful logout
            // Clear stored tokens and any other user data
            completion(nil)
            
        case .failure(let error):
            // Handle error
            completion(error)
        }
    }
}
```

And here’s how I’d call the `logout()` method:

```swift
auth0Manager.logout() { error in
    if let error = error {
        print("Logout error!")
    } else {
        print("OK")
        isAuthenticated = false
    }
}
```

<img src="https://images.ctfassets.net/23aumh6u8s0i/2g2IgpFO8E6hNzFAwaDfdc/e2042210acd1c1b96f3c4629001a5d39/gavel.png" align="left" style="padding: 20px;" alt="Judge’s gavel resting on a hardcover book." />ChatGPT didn’t provide a <code>completion</code> parameter for the <code>logout()</code> method as it did for the <code>login()</code> method. I won’t award it a point, but I won’t take one away, either. At the end of this exercise, ChatGPT has 2 points. Not bad!


## Is Your Developer Job Safe?

Considering that it’s been only half a year since we last tested ChatGPT’s ability to write code that integrates Auth0 into iOS apps, this is an impressive improvement. You might be wondering what kinds of leaps it might make over the next couple of years if AIs keep advancing at the same pace, and more importantly, what this means for your career as a developer.

I don’t think of AIs like ChatGPT as a threat. Instead, I think of them as part of a long series of cognitive aids that include  [tally sticks](https://en.wikipedia.org/wiki/Tally_stick), [the abacus](https://www.ecb.torontomu.ca/~elf/abacus/intro.html), writing, [logarithmic tables](https://www.cuemath.com/algebra/log-table/), and [slide rules](https://sliderulemuseum.com/SR_Course.htm), as well as their more modern counterparts such as the combination of search engines and Stack Overflow, [code completion](https://en.wikipedia.org/wiki/Intelligent_code_completion), and [GitHub Copilot](https://github.com/features/copilot). I think that AIs can enhance what a human programmer can do and even provide ideas and inspiration that they might not think of. After all, ChatGPT’s answer provided me with a couple of ideas that I’m going to use in future code.

You might find it helpful to read this IEEE Spectrum article, [_How Coders Can Survive—and Thrive—in a ChatGPT World_](https://spectrum.ieee.org/ai-programming), which lists four ways in which developers can stay ahead of generative AIs. It captures my thinking about AI and programming in its final paragraph:

<blockquote>For programmers to survive in a generative AI world, they’ll need to embrace AI as a tool and incorporate AI into their workflow while recognizing the opportunities and limitations of these tools—and still relying on their human coding capabilities to thrive.</blockquote>

ChatGPT Tries to Add Auth0 Authentication to an iOS App, Round Two!

tonycamp

Tom Camp is a DevRel Engineer at <b><a href="https://ably.com/">Ably</a></b>. His recent interest lies in open realtime data and ways of representing and sharing it. He’s also a member of the Open API and Async API communities which work towards standardizing specifications and capabilities of APIs. In his spare time, Tom loves to play strategy-based games and modding them.

DevRel Engineer at Ably Realtime

Thomas Camp

Creating a Universal Authentication System with Auth0 for Ably's scalable chat application.

This is the second part of [Ably’s Fully Featured Scalable Chat App](https://ably.com/blog/fully-featured-scalable-chat-app) series. We have been working on creating a prototype for an open-source chat application that anyone could use at real-world scales of traffic, with many of the bells and whistles one would expect from a modern chat application. This means integrated media, notifications, and more.

If you want to try out this application yourself, you can get the code from [GitHub](https://github.com/ably-labs/fully-featured-scalable-chat-app) and follow the [README](https://github.com/ably-labs/fully-featured-scalable-chat-app#readme) on the steps for local setup.

Our goal is for you to be able to take the code and create your own scalable chat application or mix and match elements from it into other applications that need a chat element.

Ably handles the complexity of distributed messaging between clients, presence checks, and authorization of messages. By making use of [WebSockets](https://ably.com/topic/websockets) we can have persisted, realtime communication. Making use of Ably as a [Pub/Sub broker](https://ably.com/pub-sub-messaging), we will be able to have the consistent ordering of messages and reliable message ordering. You can try out these features by [signing up for a free Ably account](https://ably.com/signup).

Before starting on these elements, however, we need the absolute fundamentals of chat. One of the most crucial things to get right is the authentication of users.

Authentication requires:

*   All information we store on users to be secure
*   We should provide 2FA and reasonable methods to recover an account should login credentials be forgotten
*   Password resetting should be possible
*   We need to be able to assign permissions, user information, and more to a user

## 

## Starting Off

Prior to starting on our authentication system, we already have a few things in place.

We have a frontend server that is hosting a [ReactJS](https://reactjs.org/) application, compiled using [Snowpack](https://www.snowpack.dev/). On this, we have a basic page as seen below which allows for a user to set a username for themselves.

![Starting Off](https://images.ctfassets.net/23aumh6u8s0i/10HfnKU3xmw1aTcBXfQNwP/36fc8f2a57b7a7dc1f323cfd090c7ea8/Uploaded_from_Fully_Functional_Scalable_Chat_App)

Once a user sets their username, they’ll be taken to the main chat application page, which has the available hard-coded chat channels on the left, which you can click on to load a [React Component](https://reactjs.org/docs/react-component.html) on the right of the screen for chatting within that channel.

![Starting Off](https://images.ctfassets.net/23aumh6u8s0i/6UCmezwQzxO2oDofbC3JaX/5433dd6b9b2d8409fb4a6f79b599c8e5/ably-chat.png)

The chat uses Ably. When a user clicks on one of the chat channels on the left of the screen, we use the [Ably React Hooks](https://ably.com/blog/ably-react-hooks-npm-package) library to connect to one of Ably’s servers and subscribe to its associated [Ably Channel](https://ably.com/documentation/realtime/channels). For example, to subscribe to the Ably Channel for the ‘global-welcome’ chat room:

```javascript
[ channel ] = useChannel(“global-welcome”, (message) => {
// Append message to our chat box component
});
```

If we want to publish a message to this channel, we can make use of the channel object returned by the `useChannel` function:

```javascript
channel.publish("message", messageFromChatBox);
```

We do both of these within the FFS app inside our [ChatContainer](https://github.com/ably-labs/fully-featured-scalable-chat-app/blob/main/app/src/components/Chat/ChatContainer.jsx) code, which you can check if you’d like to see real examples.

With the above, we’re able to allow for non-authenticated usage of some hard-coded chat rooms with a username. However, we have no form of authentication at this stage. We trust the user to set themselves to have any name, even if it’s the same as someone else. We have no way to uniquely identify a user, which is something that is crucial for having any form of permissioning, private discussions, notifications, and more.

## Creating a Basic Authentication System

For an absolutely rudimentary authentication system, we need to have:

*   A signup page where users can create a username and password
*   A database to store these, with the password being encrypted
*   A backend system that can authenticate a user when logging in by checking their login details to the database, and return a token that the user can use for any actions which require authentication
*   An endpoint that can be used to get authentication credentials to be used with Ably

<br>
In addition, we’d want:

*   2-Factor Authentication
*   Password Resetting
*   Social media logins

Each would be complex to implement, with many edge-cases and many security concerns to address. However, we thankfully knew of an existing solution for this, which [we’ve used in numerous projects](https://auth0.com/blog/dependable-and-secure-realtime-in-spring-boot-with-auth0-and-ably/) before, known as [Auth0](https://auth0.com/).

Auth0, an authentication and authorization platform, simplifies this process immensely. Not only does it allow for easy integration with your login systems, but it also makes integrating other login services such as Google and Twitter simple. It allows for a quick setup of permissions, roles with set permissions attached, and these roles to be assigned to users. These users can then use various login systems to access the same account and thus have the same permissions.

### Setting up Auth0

To make use of Auth0, you firstly need to create and configure an account with them. To do this, firstly, [sign up to Auth0](https://auth0.com/signup) on their website. Go through the signup process, setting whatever [tenant name and region you'd like](https://auth0.com/docs/get-started/create-tenants). Once you’re signed up, go to the ‘Applications’ part of the website. You should see ‘Default App’ here, which you can use for this tutorial, or you can create a new app if you so wish.

![Setting up Auth0](https://images.ctfassets.net/23aumh6u8s0i/62NYAkeQ25FA41mP2aspir/c6b325272a4447284036388fcae8a51c/Uploaded_from_Fully_Functional_Scalable_Chat_App)

If you go to your app, you should arrive on the ‘Settings’ page for the app. From here, you should make a note of the **Domain**, **Client** **ID**, and **Client Secret**.

![Setting up Auth0](https://images.ctfassets.net/23aumh6u8s0i/5ksyxBrksEBwQSeCkZe5VP/945e24c31578d98a6425b52c61eefbe0/Uploaded_from_Fully_Functional_Scalable_Chat_App)

On this _settings_ tab, scroll down to the section called ‘Application URIs.’ In it, you should see a field for ‘Allowed Callback URLs’ and ‘Allowed Logout URLs.’ For context, the flow of a webpage using Auth0 is:

*   Your site links a user to your Auth0 app’s login page, where they sign in
*   The Auth0 page redirects the user back to your website’s ‘callback’ page
*   When the user wants to log out, they are directed to the Auth0 app’s logout page and then redirected back to the page specified in the ‘returnTo’ query passed to the logout page

To avoid potential misuse and abuse, you need to specify what URLs Auth0 can redirect to. When hosting this chat app locally, it is hosted on localhost:8080, so set the **Allowed Callback URLs** to ‘[http://localhost:8080/auth0-landing](http://localhost:8080/auth0-landing)’. When a user logs out, we’ll have the user redirected back to our main page, so set the **Allowed Logout URLs** to ‘[http://localhost:8080/](http://localhost:8080/)’.

### Using an Auth0 application from the chat application

With the Auth0 application set up, the actual chat application needs to make use of it. When someone attempts to sign up or log in via Auth0, we will need to redirect a user to the appropriate Auth0 endpoint, and the same needs to occur when a user logs out.

Auth0 provides both a [React library](https://www.npmjs.com/package/@auth0/auth0-react) as well as a standard node module. Both work well, and in most cases, you’d probably want to use the React library as it will automatically handle a lot of authentication state sharing between different components.

For this project, however, we decided to go with the node module. This was due to a few reasons:

*   We want the code to be easily understood, and as we will need to use the node module version from the [Serverless Functions](https://azure.microsoft.com/en-gb/services/functions/) we’re using for our database, it makes sense to keep consistency between both frontend and backend
*   To use the Auth0 library, it needs to have specific details such as the endpoint name specified as part of a compilation. To have these details adjustable by anyone using the project, we’d need to set this as part of the environment variables. This variable would be required at two different stages, the compilation (which we do on GitHub using [GitHub Actions](https://github.com/features/actions)) and at runtime (for the Serverless Functions which we’re hosting on Azure), we’d need to specify it in 2 separate environments.

To avoid these complications, we decided only to store these Auth0 variables on the Serverless Functions and make them available via a Serverless Function to clients to use. We couldn’t use the React library to do this, as it has no method for asynchronous instantiation of details.

Using the node library, we just need to fetch the Auth0 configuration details from the appropriate Serverless Function endpoint, and then use those to instantiate an Auth0 client:

```javascript
import createAuth0Client from "@auth0/auth0-spa-js";

const response = await fetch("/api/oauth/config");
const configuration = await response.json();
cachedClient = await createAuth0Client(configuration);
```

The Serverless Function at `/api/oauth/config` simply responds with the configuration details we obtained earlier when setting up Auth0:

```javascript
  context.res = {
	status: 200,
	body: JSON.stringify({
  		domain: process.env.AUTH0_DOMAIN,
  		clientID: process.env.AUTH0_CLIENTID,
  		client_id: process.env.AUTH0_CLIENTID,
  		redirect_uri: process.env.AUTH0_REDIRECT_URI
	})
  };
```

Now we can add a button to our chat application which will instantiate our Auth0 client as seen above, and then use the Auth0 library’s login method to redirect the user to the Auth0 login page for our app:

```javascript
export async function loginWithRedirect(event) {
  event.preventDefault();
  const auth0 = await useAuth0();
  await auth0.loginWithRedirect();
}
```

![Setting up Auth0](https://images.ctfassets.net/23aumh6u8s0i/Ce4CuRSlp8zXsf3nNvzmG/896b959bb5619c99cad5234d4d18f8f7/Uploaded_from_Fully_Functional_Scalable_Chat_App)

When the user either signs up or enters valid credentials for logging in via Auth0, they need to be redirected to the page we specified when setting up Auth0, `localhost:8080/auth0-landing`.

With that, Auth0 is now up and running and we can use it as an authentication method!

## Storing user credentials

We now have login credentials of our users stored in Auth0, but we need that data to be accessible and associated with data in our CosmosDB database as well. Ideally we’d [migrate our database’s contents over to Auth0](https://auth0.com/docs/users/import-and-export-users/configure-automatic-migration-from-your-database) to avoid duplication of information, however for the time being we decided to keep data in CosmosDB.

As we will be treating our own database as the definitive location of data, we will want to also have our Auth0 users stored in our database as well. To do this, we can just intercept the response of signup via Auth0, and get the Auth0 ID and other details to store in our database.

Our CosmosDB will thus end up with a data structure for Users, defined in our [Users.ts](https://github.com/ably-labs/fully-featured-scalable-chat-app/blob/main/api/common/metadata/User.ts) file, of:

*   id: Unique ID for the User in our database
*   username: the login name they use if using our custom login system
*   oauthSub: The unique Auth0 ID if the user has an Auth0 login method associated with them
*   firstName: The user’s first name
*   lastName: The user’s last name
*   profileImgUrl: User’s profile image

With the above, we can provide users with login methods for both Auth0. We will also have representations of all our users within our database.

## Conclusion

With that, we have a way to authenticate users. With Auth0 we’re able to have 2FA, password recovery, and a smooth signup process handled for us. We have additional user information stored within CosmosDB, which we can use for providing additional information on users, which we can potentially use for profile pages, attaching details to messages.

With authentication done now, we still need to be able to authorize these users. We may know who someone is when they’re logged in, but we’re yet to define what permissions they should have, and how we’ll control them.

Next, we’ll be diving into how we can make use of a combination of Role-based Access Control (RBAC) and fine-grained permissions to define an authorization structure for users, as well as how to apply these permissions to both our backend as well as our real-time communications over WebSockets using Ably.

If you have any questions or thoughts about this project, please get in touch on [Twitter](https://twitter.com/ablyrealtime/) or via [email](mailto:devrel@ably.com) and we’d love to talk with you!

Ably's Fully Featured Scalable Chat App

Majid Hajian

I am a Google Developer Expert and Media Developer Expert and a passionate software developer with years of developing and architecting complex web and mobile applications. my passions are Flutter, PWA, and performance. I love sharing my knowledge with the community by writing and speaking, contributing to open source, and organizing meetups and events.

Google Developer Expert

In this tutorial, you’ll learn how to enhance your Flutter apps by enabling authentication, supporting federated identity providers, adding authorization by introducing roles and permissions, all leveraging Auth0.

Flutter Authentication and Authorization with Auth0, Part 3: Adding Real-Time Chat to the App

Learn how to build a realtime chat application with Spring Boot, Auth0 and Ably.

Dependable and Secure Realtime in Spring Boot with Auth0 and Ably

obielum-godson

I am a Software Developer with a life goal of using technology as a tool for solving problems across the major industries in the world. My expertise lies in languages and frameworks such as Angular, React, Java, and Node. I also love writing and see it as one of the most efficient ways of teaching/passing down information about basically any subject.

Full-Stack Developer

Obielum Godson

Learn how to develop a real-time web chat with Firebase and Firestore

Developing Real-Time Apps with Firebase and Firestore

yomi-eluwande

Guest Author

Yomi Eluwande

Learn how to integrate React, Pusher, and Auth0 to create realtime applications.

"chat"