Skip to main content

Integrate authentication into Flutter Web

This guide shows how to create a simple Flutter application and secure it with authentication powered by Ory. You can use this guide with both Ory Network and self-hosted Ory software.

This guide is perfect for you if:

  1. You have Flutter installed.
  2. You want to build an app using Flutter.
  3. You want to give access to your application to signed-in users only.

Before you start, watch this video to see the user flow you're going to implement:

info

You can find the code of the sample application here.

Create Flutter Web app​

Run this command to create a basic Flutter application:

flutter create myapp
cd myapp

Add dio and flutter dotenv to your pubspec.yaml file.

We use dio for HTTP request and flutter dotenv for environment variable management.

pubspec.yaml
import pubspec from '!!raw-loader!../../../code-examples/protect-page-login/flutter_web_redirect/pubspec.yaml'
import CodeBlock from '@theme/CodeBlock'

<CodeBlock language="yaml">{pubspec}</CodeBlock>

Install Ory CLI​

Follow this guide to install the Ory CLI on your machine.

Why do I Need the Ory CLI?​

Ory CLI provides a convenient way to configure and manage projects. Additionally, the CLI contains Ory Proxy - a reverse proxy that rewrites cookies to match the domain your application is currently on.

Ory Proxy is a reverse proxy deployed in front of your application. The Proxy mirrors Ory endpoints on the same domain as the application you're running and rewrites cookies to match the domain your application is currently on.

As a result, the origin of the cookies is set correctly to the domain you run the app on instead of 

<your-project-slug>.projects.oryapis.com

This behavior is necessary to avoid issues with the browser CORS policy.

By using the Proxy, you can easily connect the application you're developing locally to Ory Network and consume the APIs without additional configuration or the self-hosting any Ory services.

Ory Proxy mirrors Ory's APIs

tip

To learn more about the Ory Proxy, read the dedicated section of the Ory CLI documentation.

Create the authentication service​

Next, create an Authentication service in the lib/services directory. This service will be used to query the Ory APIs for session information.

mkdir lib/services && touch lib/services/auth.dart
lib/services/auth.dart
import auth from '!!raw-loader!../../../code-examples/protect-page-login/flutter_web_redirect/lib/services/auth.dart'

<CodeBlock language="dart">{auth}</CodeBlock>

Add environment variables​

Create a .env file in the root of the project to hold the ORY_BASE_URL variable. The value of the variable is the Ory proxy URL, for example http://localhost:3005.

touch .env
.env
import env from '!!raw-loader!../../../code-examples/protect-page-login/flutter_web_redirect/env'

<CodeBlock language="text">{env}</CodeBlock>

Update lib/main.dart​

Finally, update the lib/main.dart file to check for a session cookie on the initial load of the application. If the cookie is found, the user can access the application. If the cookie isn't found, the user is redirected to the login page.

lib/main.dart
import main from '!!raw-loader!../../../code-examples/protect-page-login/flutter_web_redirect/lib/main.dart'

<CodeBlock language="dart">{main}</CodeBlock>

Test you application​

Run the following steps to get your application running:

  1. Start your flutter web server
flutter run -d web-server --web-port 4005
  1. Export the SDK configuration URL for the desired Ory project. You can use the provided playground project for testing, or export the SDK URL of your own project.
info

To get your project's SDK URL, sign in at console.ory.sh, select Connect from the left navigation panel, and copy the URL from the SDK Configuration section.

# This is a public Ory Network Project.
# Don’t submit any personally identifiable information in requests made with this project.
# Sign up to Ory Network at
#
#   https://console.ory.sh/registration
#
# and create a free Ory Network Project to see your own configuration embedded in code samples.
export ORY_SDK_URL=https://{project.slug}.projects.oryapis.com
  1. Run the Ory tunnel to expose Ory API under the same top-level domain as your application (localhost):
ory tunnel --port 3005 http://localhost:4005
  1. Open http://localhost:4005 to access the application. As the initial call is made by an unauthenticated user, the session check doesn't detect a valid session and redirects to the login page of the defined Ory project.

    From there, you can create a new account or sign in using an existing identity. When you sign in, the session becomes valid and the application shows the Home page with the session data.

Go to production​

You can use many different approaches to go to production with your application. You can deploy it on Kubernetes, AWS, a VM, a RaspberryPi - the choice is yours! To connect the application to your Ory project, the app and Ory APIs must be available under the same common domain, for example https://ory.example.com and https://www.example.com.

You can easily connect Ory to your subdomain. To do that, add a Custom Domain to your Ory Network project.

With the custom domain set up, you don't need to use Ory Proxy or Ory Tunnel to interact with Ory APIs. Instead, use the configured custom domain in your SDK calls:

Release build​

With the flutter cli we can build a release version of our App by running the command below:

flutter build web

We then need an HTTP server to serve the files, we will use dhttpd.

dhttpd --host localhost --port 4005 --path build/web
tip

Follow this link to learn more about Flutter Web applications in production.

Ory Network

The most flexible and scalable way to manage identi­ties, authen­tication, autho­rization and access control.Explore Ory Network

Explore Ory Network