Authgear helps you add user logins to your React apps. It provides a pre-built login page and user settings page that can accelerate your development process.

Setup Application in Authgear

After that, we will need to create an Application in the Project Portal.

Create an application in the Portal

To create a client application, go to Applications on the left menu bar in the Authgear Portal.

Next, click ⊕Add Application in the top toolbar.

Enter the name of your application, e.g. "MyAwesomeApp", then select Single Page Application as the Application Type. Click the Save button to create the application.

Configure Authorize Redirect URI

The Authorized Redirect URI is a URL in you application where the user will be redirected to after login with Authgear. In this path, make a finish authentication call to complete the login process.

Go to the URI section of the Authgear client application you just created and add a new Authorized Redirect URI. For this tutorial, add http://localhost:4000/auth-redirect to Authorize Redirect URIs.

Click Save to keep all client app configuration changes before proceeding to the next steps.

Add Authgear to React App

In this section, we'll create a simple React application and connect it to Authgear such that, users of the app will log in, view their user settings, and log out of their account.

Step 1: Create a simple React project

Here are some recommended steps to scaffold a React project. You can skip this part if you are adding Authgear to an existing project. See Step 2: Install Authgear SDK to the project in the next section.

Create a new React project using Vite

Run the following command from your preferred folder to create a new React project with Vite:

npm create vite@latest my-app -- --template react-ts 

Next, run the following commands to open the new project directory and install the dependencies:

cd my-app
npm install

Change port

In the package.json file, update the value of dev field in the script.dev section to:

"dev": "vite --port 4000",

This will enable the npm run dev command run the app in development mode on port 4000.

The file structure in your project should look like this now:

my-app
├── node_modules
│   └── (...)
├── package-lock.json
├── package.json
├── index.html
└── src
    ├── App.tsx
    └── main.tsx

Run npm run dev now to run the project and you will see the default "Vite + React" page when you open http://localhost:4000 on a web browser.

Step 2: Install Authgear SDK to the project

Run the following command within your React project directory to install the Authgear Web SDK

npm install --save --save-exact @authgear/web

In src/main.tsx , import authgear and call the configure function to initialize an Authgear instance on application loads.

import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import authgear from "@authgear/web"

async function init() {
  try {
    // configure Authgear container instance
    await authgear.configure({
      endpoint: import.meta.env.VITE_AUTHGEAR_ENDPOINT,
      clientID: import.meta.env.VITE_AUTHGEAR_CLIENT_ID,
      sessionType: "refresh_token",
    });
  } finally {
    createRoot(document.getElementById("root")!).render(<App />);
  }
}

init().catch((e) => {
  // Error handling
  console.error(e)
});

The Authgear container instance takes endpoint and clientID as parameters. They can be obtained from the configuration page for the application created in Setup Application in Authgear. Create a .env file in the root directory of your project and add your Authgear client application configuration using the following fields:

VITE_AUTHGEAR_CLIENT_ID=<CLIENT_ID>
VITE_AUTHGEAR_ENDPOINT=<AUTHGEAR_ENDPOINT>
VITE_AUTHGEAR_REDIRECT_URL=http://localhost:4000/auth-redirect

It is recommended to render the app after configure() resolves. So by the time the app is rendered, Authgear is ready to use.

Step 3: Implement the Context Provider

Since we want to reference the logged-in state everywhere in the app, let's put the state in a context provider with UserProvider.tsx in the /src/context folder.

The UserProvider.tsx file will have an isLoggedIn boolean and a setIsLoggedIn function. The isLoggedIn boolean state can be auto-updated using the onSessionStateChange callback. This callback can be stored in delegate which is in the local SDK container.

// src/context/UserProvider.tsx
import React, { createContext, useEffect, useState, useMemo } from "react";
import authgear from "@authgear/web";

interface UserContextValue {
  isLoggedIn: boolean;
}

export const UserContext = createContext<UserContextValue>({
  isLoggedIn: false,
});

interface UserContextProviderProps {
  children: React.ReactNode;
}

const UserContextProvider: React.FC<UserContextProviderProps> = ({
  children,
}) => {
  // By default the user is not logged in
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  useEffect(() => {
    // When the sessionState changed, logged in state will also be changed
    authgear.delegate = {
      onSessionStateChange: (container) => {
        // sessionState is now up to date
        // Value of sessionState can be "NO_SESSION" or "AUTHENTICATED"
        const sessionState = container.sessionState;
        if (sessionState === "AUTHENTICATED") {
          setIsLoggedIn(true);
        } else {
          setIsLoggedIn(false);
        }
      },
    };
  }, [setIsLoggedIn]);

  const contextValue = useMemo<UserContextValue>(() => {
    return {
      isLoggedIn,
    };
  }, [isLoggedIn]);

  return (
    <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>
  );
};

export default UserContextProvider;

Step 4: Implement the Auth Redirect

Next, we will add an "AuthRedirect" page for handling the authentication result after the user has been authenticated by Authgear.

First, install react-router-dom using the following command:

npm install --save-exact react-router-dom

Create the AuthRedirect.tsx component file in the src/ folder.

Call the Authgear finishAuthentication() function in the Auth Redirect component to send a token back to Authgear server in exchange for an access token and a refresh token. Don't worry about the technical jargons, finishAuthentication() will do all the hard work for you and save the authentication data.

When the authentication is finished, the isLoggedIn state from the UserContextProvider will be automatically set to true. Finally, navigate back to root (/) which is our Home page.

The final AuthRedirect.tsx will look like this

// src/AuthRedirect.tsx
import React, { useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import authgear from "@authgear/web";

const AuthRedirect: React.FC = () => {
  const usedToken = useRef(false);

  const navigate = useNavigate();

  useEffect(() => {
    async function updateToken() {
      try {
        await authgear.finishAuthentication();
      } finally {
        navigate("/");
        usedToken.current = true;
      }
    }

    if (!usedToken.current) {
      updateToken().catch((e) => console.error(e));
    }
  }, [navigate]);

  return <></>;
};

export default AuthRedirect;

Step 5: Add Routes and Context Provider to the App

Now, we will add a "Home" page. Create a Home.tsx component file the src/ folder.

Then import Home and AuthRedirect as routes. And Import UserContextProvider and wrap the routes with it.

Your final App.tsx should look like this:

// src/App.tsx
import React from "react";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import AuthRedirect from './AuthRedirect';
import UserContextProvider from './context/UserProvider';

const App: React.FC = () => {
  return (
    <UserContextProvider>
      <Router>
        <Routes>
          <Route path="/auth-redirect" element={<AuthRedirect />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </Router>
    </UserContextProvider>
  );
}

export default App;

The file structure should now look like

src
├── App.tsx
├── AuthRedirect.tsx
├── Home.tsx
├── context
│   └── UserProvider.tsx
└── main.tsx

Step 6: Add a Login button

First, we will import the Authgear dependency and the React Hook that we will use to Home.tsx. Then add the login button which will call startAuthentication(ConfigureOptions) through the startLogin on click callback. This will redirect the user to the login page.

// src/Home.tsx
import React, { useEffect, useState, useCallback, useContext } from 'react';
import authgear, { PromptOption } from '@authgear/web';

const Home: React.FC = () => {
  const startLogin = useCallback(() => {
    authgear
      .startAuthentication({
        redirectURI: import.meta.env.VITE_AUTHGEAR_REDIRECT_URL,
        prompt: PromptOption.Login,
      })
      .then(
        () => {
          // started authentication, user should be redirected to Authgear
        },
        err => {
          // failed to start authentication
        }
      );
  }, []);
  return (
    <div>
      <h1>Home Page</h1>
      <div>
        <button onClick={startLogin}>Login</button>
      </div>
    </div>
  );
}

export default Home;

You can now run npm run dev and you will be redirected to the Authgear Login page when you click the Login button.

Step 7: Show the user information

The Authgear SDK helps you get the information of the logged-in users easily.

In the last step, the user is successfully logged in, so let's try to print the user ID (sub) of the user on the Home page.

In Home.tsx, we will add a simple loading splash and a greeting message printing the Sub ID. We will add two conditional elements such that they are only shown when user is logged in. We can also change the login button to show only if the user is not logged in.

Make use of isLoggedIn from the UserContext to control the components on the page. Fetch the user info by fetchInfo() and access its sub property.

// src/Home.tsx  
import React, { useEffect, useState, useCallback, useContext } from "react";
import authgear, { PromptOption } from "@authgear/web";
import { UserContext } from "./context/UserProvider";

const Home: React.FC = () => {
  const [greetingMessage, setGreetingMessage] = useState<string>("");
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const { isLoggedIn } = useContext(UserContext);

  useEffect(() => {
    async function updateGreetingMessage() {
      setIsLoading(true);
      try {
        if (isLoggedIn) {
          const userInfo = await authgear.fetchUserInfo();
          setGreetingMessage("The current User sub: " + userInfo.sub);
        }
      } finally {
        setIsLoading(false);
      }
    }

    updateGreetingMessage().catch((e) => {
      console.error(e);
    });
  }, [isLoggedIn]);

  const startLogin = useCallback(() => {
    authgear
      .startAuthentication({
        redirectURI: "http://localhost:4000/auth-redirect",
        prompt: PromptOption.Login,
      })
      .then(
        () => {
          // started authentication, user should be redirected to Authgear
        },
        (err) => {
          // failed to start authentication
        }
      );
  }, []);

  return (
    <div>
      <h1>Home Page</h1>
      {isLoading && "Loading"}
      {greetingMessage ? <span>{greetingMessage}</span> : null}
      {!isLoggedIn && (
        <div>
          <button type="button" onClick={startLogin}>
            Login
          </button>
        </div>
      )}
    </div>
  );
};

export default Home;

Run the app again, the User ID (sub) of the user should be printed on the Home page.

Step 8: Add a Logout button

Now, let's add a Logout button that is displayed when the user is logged in.

In Home.tsx, we will use conditional elements to show a Logout button only for a user that is currently logged in.

Find the following line in Home.tsx:

{!isLoggedIn && (
        <div>
          <button type="button" onClick={startLogin}>
            Login
          </button>
        </div>
)}

Add the following code on a new line just after the above line:

{isLoggedIn && (
  <div>
    <button onClick={logout}>Logout</button>
  </div>
)}

Then, add the logout callback:

const logout = useCallback(() => {
  authgear
    .logout({
      redirectURI: "http://localhost:4000/",
    })
    .then(
      () => {
        setGreetingMessage('');
      },
      (err) => {
        console.error(err);
      }
  );
}, []);

Run the app again, we can now log out by clicking the Logout button.

Step 9: Open User Settings

Authgear provides a built-in UI for the users to set their attributes and change security settings.

Use the openURL function to open the settings page at <your_app_endpoint>/settings

In Home.tsx Add a conditional link to the existing elements.

{isLoggedIn && (
  <a target="_blank" rel="noreferrer" onClick={userSetting} href="#">
    User Setting
  </a>
)}

And add the userSetting callback:

import authgear, { Page } from "@authgear/web";
const userSetting = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    e.stopPropagation();
    authgear.open(Page.Settings);
}, []);

This is the resulting Home.tsx:

// src/Home.tsx
import React, { useEffect, useState, useCallback, useContext } from "react";
import { UserContext } from "./context/UserProvider";
import authgear, { Page, PromptOption } from "@authgear/web";

const Home: React.FC = () => {
  const [greetingMessage, setGreetingMessage] = useState<string>("");
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const { isLoggedIn } = useContext(UserContext);

  useEffect(() => {
    async function updateGreetingMessage() {
      setIsLoading(true);
      try {
        if (isLoggedIn) {
          const userInfo = await authgear.fetchUserInfo();
          setGreetingMessage("The current User sub: " + userInfo.sub);
        }
      } finally {
        setIsLoading(false);
      }
    }

    updateGreetingMessage().catch((e) => {
      console.error(e);
    });
  }, [isLoggedIn]);

  const startLogin = useCallback(() => {
    authgear
      .startAuthentication({
        redirectURI: "http://localhost:4000/auth-redirect",
        prompt: PromptOption.Login,
      })
      .then(
        () => {
          // started authorization, user should be redirected to Authgear
        },
        (err) => {
          // failed to start authorization
          console.error(err);
        }
      );
  }, []);

  const logout = useCallback(() => {
    authgear
      .logout({
        redirectURI: "http://localhost:4000/",
      })
      .then(
        () => {
          setGreetingMessage("");
        },
        (err) => {
          console.error(err);
        }
      );
  }, []);

  const userSetting = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    e.stopPropagation();
    authgear.open(Page.Settings);
  }, []);

  return (
    <div>
      {/* eslint-disable-next-line react/forbid-elements */}
      <h1>Home Page</h1>
      {isLoading && "Loading"}
      {greetingMessage ? <span>{greetingMessage}</span> : null}
      {!isLoggedIn && (
        <div>
          <button type="button" onClick={startLogin}>
            Login
          </button>
        </div>
      )}
      {isLoggedIn && (
        <div>
          <button type="button" onClick={logout}>
            Logout
          </button>
          <br />
          <a target="_blank" rel="noreferrer" onClick={userSetting} href="#">
            User Setting
          </a>
        </div>
      )}
    </div>
  );
};

export default Home;

Next steps, Calling an API

To access restricted resources on your backend application server, the HTTP requests should include the access token in their Authorization headers. The Web SDK provides a fetch function which automatically handles this, or you can get the token with authgear.accessToken.

Option 1: Using fetch function provided by Authgear SDK

authgear
    .fetch("YOUR_SERVER_URL")
    .then(response => response.json())
    .then(data => console.log(data));

Option 2: Add the access token to the HTTP request header

You can get the access token through authgear.accessToken. Call refreshAccessTokenIfNeeded every time before using the access token, the function will check and make the network call to refresh the access token only if it is expired. Include the access token into the Authorization header of the application requests.

authgear
    .refreshAccessTokenIfNeeded()
    .then(() => {
        // access token is ready to use
        // accessToken can be string or undefined
        // it will be empty if user is not logged in or session is invalid
        const accessToken = authgear.accessToken;

        // include Authorization header in your application request
        const headers = {
            Authorization: `Bearer ${accessToken}`
        };
    });

Authgear makes it easy to add user authentication and authorization to any application. In this guide, we'll show you how to get started with Authgear in 5 minutes.

Video Guide

1. Create Authgear account

After you sign up, you'll see the onboarding screen that will guide you through the process of creating your first Authgear project.

2. Authgear Projects

An Authgear project is similar to a container that holds all your users, settings, and client applications. You need an Authgear project before you can start signing users up.

You can create multiple projects under one account based on your needs. When you create multiple projects, each project is isolated from the others. For example, you can create Project 1 for your e-commerce business and Project 2 for a fitness club you organize. Project 1 and Project 2 will not share the same users or settings.

To create an additional project, log in to your Authgear account then click on the "Create Project" button.

3. Testing your signup/login page

Before any integration, you can try out the signup flow for your project from the "Getting Started" page.

You should be greeted with the AuthUI Login/Sign-up page. Use the form to create a new user account under your project.

4. User Settings Page

After logging in from the previous step, you can check out the Pre-Built User Settings Page. This page is the default page where users of your project can edit their profile and manage security settings.

Click on the Edit Profile to edit and view profile attributes such as first name, last name, photo, etc.

Users can manage the identities (email address, phone number, or social media account) linked to their account under the My Account section of the User Settings page.

The Security section of the User Settings page has the following options:

• Password: users can change their password from here.

• 2-step verification: users can click on this option to view and manage 2-step authenticators for their account. The option is only available when you enable 2FA for your project in Authgear Portal > Authentication > 2FA.

• Signed-in device: from this page, the user can view browsers and devices that their account is currently signed in on.

5. Integrate Authgear with Your Application or Website

To get more from Authgear and use Authgear to add user authentication to your web or mobile application, you should integrate Authgear to your application or website.

6. View and Manage Your Users

Authgear offers multiple options for viewing and managing all users who sign up for your project. These options include:

• Authgear Portal

The quickest way to manage your users is from the Authgear Portal. To open the user management page in the Authgear Portal, click on the User Management link in the navigation bar on the left side.

Click on Users to view a list of all the users in your project. Click on a user from the list to view their complete profile and perform administrative operations like modify profile details, suspend/unsuspend user, delete account, etc.

You can also add new users to your project from the User Management page. To do that, click on the Create User button on the right.

7. Continue Exploring Authgear

Continue to navigate around the Authgear Portal to see all the features and settings available for your project.

You can also check out any of the following guides to learn more about Authgear:

Integration Approaches

There are 3 different high-level approaches to integrating Authgear with your applications:

1. Mobile apps or single-page web applications: The frontend clients integrate with Authgear’s SDKs, which handle full login flow and session management. It’s important to validate the session in your backend server.

2. Regular Web Applications: Traditional server-side rendered web apps that run on the server can use OIDC protocol to authenticate with Authgear. The application server has full control over the session storage.

3. Software built by others: Integrate with other OIDC/SAML compatible applications like WordPress, Salesforce for Single Sign-On.

Mobile apps or single-page web applications

Client-side SDKs

Check out the following guides for your specific framework:

• Guides for Frontend JS SDK
• Guides for Mobile SDKs

Validate JWT in your backend server

Customization

User Management through backend server

The Authgear Admin API enables comprehensive user management via a GraphQL endpoint for your backend server. The server can perform operations including searching for users, updating user details, deleting user accounts, and disabling user access.

Custom UI

Regular Web Applications

If your application is a traditional web app running on a server, you can leverage the OpenID Connect (OIDC) protocol to authenticate users via Authgear. A wide range of plug-and-play libraries can be found that simplify the integration process. These libraries handle crucial tasks such as authentication requests, session management, and redirecting users back to your application seamlessly.

See the following tutorials for your specific application framework:

Customization

User Management

The Authgear Admin API enables comprehensive user management via a GraphQL endpoint for your server. The server can perform operations including searching for users, updating user details, deleting user accounts, and disabling user access.

Custom UI

Software built by others

When implementing identity management for your enterprise software, Authgear provides robust single sign-on (SSO) capabilities that seamlessly connect your workforce. Enterprise applications typically support standard authentication protocols like OpenID Connect (OIDC) and Security Assertion Markup Language (SAML)

Authgear is an authentication & user management solution which makes it very easy for developers to integrate and customize their consumer applications, it includes these features out of the box:

• Easy-to-use interfaces for user registration and login, including email, phone, username as login ID, and password, OTP, magic links, etc for authentication.

• Support biometric login on mobile, Passkeys, and Multi-Factor Authentication (MFA) such as SMS/email-based verification and authenticator apps with TOTP.

• A user management portal, like password resets, account locking, scheduled deletion or anonymization, and user profile management.

• Single Sign-On (SSO) provides a single unified experience for your customers to log into multiple web/mobile apps, including Web2Web, Web2App, and App2App SSO.

• Session management with Authgear Portals, and a pre-built setting page for users to control concurrent sessions.

• Customizable UI with a user-friendly low-code dashboard.

• Various security features such as audit logs, brute force protection, smart account lockout, password policy, etc.

Learn about Authgear

Authgear contains the following high-level components:

Authenticate on the Web/Mobile App

• Auth UI - is the default batteries included UI for login, signup and setting page. You can customize the style via the Portal, including the CSS and HTML of each page.

Backend Authentication and Integrations

Management Portal

Security

Login Methods

Customize User Interface (UI)

User Management

Features for managing your users via Authgear Portal

The Authgear Android SDK comes with kotlin support out of the box. In fact, the SDK is written in kotlin!

If you are using kotlin, you can benefit from the suspend function APIs authgear provides. For example, the above authorize example can be written as follows:

Authgear helps you add user logins to your Vue apps. It provides a prebuilt login page and user settings page that accelerate the development.

Setup Application in Authgear

After that, we will need to create an Application in the Project Portal.

Create an application in the Portal

In this step, we'll create an Authgear client application in the Authgear Portal. We'll use the configuration for this application in later steps to connect our Vue application to Authgear.

To create a client application navigate to Applications on the left menu bar in Authgear Portal.

Next, click ⊕Add Application in the top toolbar to open the New Application page.

Input the name of your application, e.g. "MyAwesomeApp" then select Single Page Application as the Application Type.

Click Save to create the application.

On the next screen, you'll see links to tutorials for different frameworks. Click Next to skip to the application configuration page

Configure Authorize Redirect URI

The Redirect URI is a URL in your application where the user will be redirected to after login with Authgear. In this path, make a finish authentication call to complete the login process.

Scroll to the URI section of the configuration page for the client application you created in the last step. For this tutorial, add http://localhost:4000/auth-redirect to Authorize Redirect URIs.

Click the Save button to save your changes before you proceed.

Add Authgear to Vue App

In this section, we'll add Authgear to a Vue application and use the Authgear JavaScript SDK to implement the following features:

• User Login/Sign-up

• Read logged-in user's info

• Open User Settings page

• End user session using a Logout button

Step 1: Create a simple Vue project

Install basic project dependencies

Run the following commands to create a new project:

Create project and move into the project directory:

Install dependencies:

Install Vue router:

Add port configuration for development mode

As we are using port 4000 for this tutorial, we need to add the port information to the config. In the vite.config.ts file, modify the file with the following lines:

After doing so, when you run npm run dev , the server will be running on port 4000.

Create the Home.vue file

Create a new file called Home.vue in the src/components folder with simply showing Hello World on the screen. Add the follow code to Home.vue:

Edit the App.vue file

The App.vue file is generated by Vite already but some sections of it might not be needed for this tutorial. Edit the content of App.vue to the following:

Delete unnecessary files

Some of the files might not be used and thus can be deleted. You can perform the following script to delete these files:

File structure

The file structure in your project is now:

Run npm run dev now to run the project and you will see the default page with the title Vite + Vue and a "Hello World" message on http://localhost:4000.

Step 2: Create routes for the project

Create a AuthRedirect.vue file in the src/components folder with the same content as src/components/Home.vue at this moment.

Create a file called router.ts in the src/ folder. We will import Home and AuthRedirect component as the route and we will implement these components later. The content of this file will look like this:

Step 3: Install Authgear SDK to the project

Run the following command within your Vue project directory to install the Authgear Web SDK

In src/main.ts , import authgear and call the configure function to initialize an Authgear instance on application loads. We will also import router and use it to build routes for us. Your main.ts file should look like this:

Create a .env file in the root directory of your project and add your Authgear client application configuration using the following fields:

It is recommended to render the app after configure() resolves. So by the time the app is rendered, Authgear is ready to use.

Step 4: Implement the Context Provider

Since we want to reference the logged-in state everywhere in the app, let's put the state in a context provider with UserProvider.vue in the /src/contexts folder.

In UserProvider.vue, will have a isLoggedIn boolean value. The isLoggedIn boolean state can be auto-updated using the onSessionStateChange callback. This callback can be stored in delegate which is in the local SDK container.

Step 5: Implement the Auth Redirect

Next, we will add an "AuthRedirect" page for handling the authentication result after the user has been authenticated by Authgear.

Create the AuthRedirect.vue component file in the src/components/ folder.

Call the Authgear finishAuthentication() function in the Auth Redirect component to send a token back to Authgear server in exchange for access token and refresh token. Don't worry about the technical jargons, finishAuthentication() will do all the hard work for you and and save the authentication data.

When the authentication is finished, the isLoggedIn state from the UserContextProvider will automatically be set to true. Finally, navigate back to root (/) which is our Home page.

The final AuthRedirect.vue will look like this

Step 6: Apply Routes and Context Provider to the App

As we have already configured the routes in the previous section, we can simply add <router-view /> tag to the App.vue. We can then Import UserProvider and wrap the router-view with it.

Your final App.vue should look like this:

The file structure should now look like

Step 7: Add a Login button

First, we will import the Authgear dependency. Then add the login button which will call startAuthentication(ConfigureOptions) through startLogin callback on click. This will redirect the user to the login page.

You can now run npm run dev and you will be redirected to the Authgear Login page when you click the Login button.

Step 8: Show the user information

The Authgear SDK helps you get the information of the logged-in users easily.

In the last step, the user is successfully logged in so let's try to print the user ID (sub) of the user in the Home page.

In Home.vue, we will add a simple Loading splash and a greeting message printing the Sub ID. We will add two conditional elements such that they are only shown when user is logged in. We can also change the login button to show only if the user is not logged in.

Make use of isLoggedIn from the UserProvider to control the components on the page. Fetch the user info by fetchInfo() and access its sub property.

The Login button can be also rendered conditionally which only visible if the user is not logged in.

Run the app again, the User ID (sub) of the user should be printed on the Home page.

Step 9: Add a Logout button

Finally, let's add a Logout button when a user is logged in.

In Home.vue, we will add the following conditional elements in the template:

And add the logout callback:

Run the app again, we can now log out by clicking the Logout button.

Step 10: Open User Settings

Authgear provides a built-in UI for the users to set their attributes and change security settings.

Use the open function to open the settings page at <your_app_endpoint>/settings

In Home.vue append a conditional link to the logout button section like this:

And add the userSetting callback:

This is the resulting Home.vue:

Next steps, Calling an API

To access restricted resources on your backend application server, the HTTP requests should include the access token in their Authorization headers. The Web SDK provides a fetch function which automatically handles this, or you can get the token with authgear.accessToken.

Option 1: Using fetch function provided by Authgear SDK

Option 2: Add the access token to the HTTP request header

You can get the access token through authgear.accessToken. Call refreshAccessTokenIfNeeded every time before using the access token, the function will check and make the network call only if the access token has expired. Include the access token into the Authorization header of the application request.

This guide provides instructions on integrating Authgear with an iOS app. Supported platforms include:

• iOS 11.0 or higher

Follow this guide to add Authgear to your iOS app in 🕐 10 minutes.

Setup Application in Authgear

From the Project listing, create a new Project or select an existing Project. After that, we will need to create an Authgear client application in the project.

Step 1: Create an application in the Portal

Go to Applications on the left menu bar.

Click ⊕Add Application in the top toolbar.

Input the name of your application and select Native App as the application type. Click "Save".

You will see a list of guides that can help you for setting up, then click "Next".

Step 2: Configure the application

Head back to Authgear Portal, and add com.example.authgeardemo://host/path as Redirect URI.

Click "Save" button and note the Client ID. and Endpoint for your new client application as you'll use them later in your iOS application. You can also obtain the Client ID again from the Applications list later.

Add Authgear to your iOS Application

In this step, we'll add user authentication to a simple iOS app using the Authgear iOS SDK and the client application we created in the previous steps.

Pre-requisites

To follow the steps in this guide seamlessly, you should have the following:

• Some knowledge of SwiftUI

Step 1: Create new iOS project

For the purpose of this guide, we'll create a new project in Xcode. Skip this step if you're adding Authgear to your existing app.

To create a new project, open Xcode and navigate to File > New > Project. Create your new project with the following details:

• Project Name: my_demo_app

• choose SwiftUI as Interface Leave other fields unchanged and proceed to create the project.

Step 2: Install Authgear SDK

The Authgear iOS SDK makes it easy to interact with Authgear services from your iOS project.

To add Authgear SDK to your project, in Xcode navigate to File > Add Package Dependencies and enter https://github.com/authgear/authgear-sdk-ios.git in the Package URL text field.

Click Add Package to proceed.

On the next screen, select your application under Add to Target then click on Add Package.

Alternatively, if your project uses cocoapods, install the SDK using:

Step 3: Initialize Authgear SDK

In this step, we'll initialize an instance of the Authgear SDK when the user interface of our app loads.

For our demo app, add the following code to ContentView.swift

1. First import Authgear iOS SDK:

1. In struct ContentView: View {}, initialize an instance of Authgear() and call the .configure() method in an .onAppear() modifier attached to VStack like this:

Step 4: Add Login Button

Now let's add the Login button and other UI elements for the demo app.

Add the following views to VStack:

In addition to the Login button, we've included a ProgressView and a block with views we want only logged-in users to see. Create the isLoading , userId and loginState variables that the if-statement and Text view depend on at the top of the class just after private var authgear: Authgear = Authgear(...):

Step 5: Start Authentication Flow

Implement a startAuthentication() method in your ContentView class that will call the authenticate() method of the Authgear SDK:

In order to get your app to build at this point, add empty declarations for logout and openUserSettings methods:

The full code for ContentView.swift at this point should look like this:

Checkpoint

Run your app now. When you click on the Login button, you should be redirected to the user authentication page.

Step 6: Register URI Schema for Redirect URI

Open your project's Info.plist or project settings UI in Xcode and add the following:

Now run your app again and try logging in. Because we've set up a redirect URL, Authgear should redirect back to our app correctly.

Step 7: Implement Logout method

Implement the logout method that will be executed when the Logout button is clicked by updating the empty logout function we added in the previous step:

Now clicking on the Logout button will call Authgear SDK's logout method and end the current user session.

Step 8: Show the user information

The Authgear SDK can return the current user's details via the UserInfo object. The authenticate method returns this userInfo object as demonstrated earlier in our app's startAuthentication() method. You can also call the SDK's .fetchUserInfo() method to get the UserInfo object.

Add a new getCurrentUser() method to your ContentView class:

Now call the new getCurrentUser() method in the .onAppear() modifier of the VStack like this:

Step 9: Open User Settings page

Authgear offers a pre-built User Settings page that user's can use to view, and modify their profile attributes and security settings.

Implement the empty openUserSettings() method we added in the previous step to call the .open() method of the Authgear SDK:

Get the Logged In State

When you start launching the application. You may want to know if the user has logged in. (e.g. Show users a Login button if they haven't logged in).

The value of sessionState can be .unknown, .noSession or .authenticated. Initially, the sessionState is .unknown. After a call to authgear.configure, the session state would become .authenticated if a previous session was found, or .noSession if such session was not found.

Using the Access Token in HTTP Requests

Call refreshAccessTokenIfNeeded every time before using the access token, the function will check and make the network call only if the access token has expired. Include the access token in the Authorization header of your application request.

Next steps

To protect your application server from unauthorized access. You will need to integrate your backend with Authgear.

iOS SDK Reference

This guide provides instructions on integrating Authgear with an Android app. Supported platforms include:

• Android 5.0 (API 21) or higher

Follow this guide to add Authgear to your Android app in 🕐 10 minutes.

Setup Application in Authgear

From the Project listing, create a new Project or select an existing Project. After that, we will need to create an application in the project.

Step 1: Create an application in the Portal

Go to Applications on the left menu bar.

Click ⊕Add Application in the top toolbar.

Input the name of your application and select Native App as the application type. Click "Save".

You will see a list of guides that can help you for setting up, then click "Next".

Step 2: Configure the application

Head back to Authgear Portal, and add the URL scheme you have defined as a Redirect URI. For our demo app, add the following URI:

Click "Save" in the top toolbar and note the Client ID as you'll use it later in your Android app. You can also obtain it again from the Applications list later.

Add Authgear to an Android Application

In this step, we'll add user authentication to an Android application using the Authgear client application we set up in the previous steps.

Pre-requisites

To follow along, you need to have the following:

• Android Studio installed on your computer

• Basic knowledge of Kotlin or Java

Step 1: Create an Android App project

For the purpose of this guide, we'll be creating a new simple Android app project. Feel free to skip this step if you are adding Authgear to your existing app.

Open Android Studio and create a new project with the following details:

• Select Empty View Activity on the Activity selection screen.

• Name: My Dem App

• Build configuration language: Groovy DSL

Step 2: Add Authgear SDK to your project

The Authgear Android SDK makes it easier to interact with Authgear endpoints and services from your Android app.

To add the SDK to your app, first, add the jitpack.io repository to your project by adding the following to your project's settings.gradle file:

Next, add authgear in the dependencies section of your app-level (/app/build.gradle) build.gradle. Use $branch-SNAPSHOT (e.g. main-SNAPSHOT) for the latest version in a branch or a release tag/git commit hash of the desired version.

Enable Java 8+ API desugaring support

To enable Java 8+ API desugaring support for your project, make the following changes to the app-level build.gradle file.

1. Add coreLibraryDesugaringEnabled true to the android > compileOptions section:

1. Then add the coreLibraryDesugaring to the dependencies section:

Sync Gradle to continue.

Step 3: Initialize Authgear

In this step, we'll initialize Authgear in the onCreate method of our app's MainActivity.kt class using a member variable. Alternatively, you can initialize Authgear in any class that's the entry point for your app:

First, declare a member variable authgear like this:

Next, we'll initialize a new instance of the Authgear SDK and call the configure() method in the onCreate function.

Replace <CLIENT_ID> and <ENDPOINT> with the values from the configuration page of your Authgear client application.

The complete code for MainActivity.kt at this point should look like this:

Step 4: Add Login Button

In this step, we'll add a login button that when the user taps on will open the login/sign-up page.

Open res/layout/activity_main.xml and delete the default "Hello World!" TextView.

Switch to the code view of activity_main.xml and add the login button and a TextView inside the root view (ConstraintsLayout).

Also, add the following views to activity_main.xml to include a Progress Bar, a User Settings button, and a Logout button that will be visible to a logged-in user.

Enable View Binding

Create a binding member variable in MainActivity.kt and modify the onCreate() method as shown below to use view binding in setContentView:

Step 5: Start the authentication flow

Create a startLogin() method in the MainActivity.kt inside class MainActivity : AppCompatActivity(){}. This method will call the Authgear SDK's authenticate() method to start a new authentication flow.

Next, implement the updateUi() method that was called in startLogin(). This function will update the Views on the screen when the user's logged-in state changes.

Finally, call the startLogin() method on click of the Login button by adding an onClickListener in the onCreate() method.

Checkpoint

At this point, if you try to run your application on a mobile device or emulator, you should be able to see the authentication UI (login/sign-up page) when you click on the Login button. However, you will be unable to complete authentication at this point because you have not implemented the activity that handles the Redirect URI.

Step 6: Setup Redirect URI for Your Android App

Add the following activity entry to the AndroidManifest.xml of your app. The intent system would dispatch the redirect URI to OAuthRedirectActivity and the SDK would handle the rest.

Targeting API level 30 or above (Android 11 or above)

If your Android app is targeting API level 30 or above (Android 11 or above), you need to add a queries section to AndroidManifest.xml.

Step 7: Implement User Logout

Add a logout() method to your MainActivity.kt class that will call the Authgear SDK's logout() method and end the current user session.

Finally, add an onClickListener for the Logout button that calls the above logout() method in the onCreate() method.

Step 7: Open User Settings Page

Authgear offers a pre-built User Settings page that user's can use to view, modify their profile attributes and security settings.

Add the following openUserSettings() method to your MainActivity.kt class:

Then add an onClickListener for the User Settings button in the onCreate() method that calls the above openUserSettings() method.

Additional Actions

Get the Logged In State

The value of SessionState can be UNKNOWN, NO_SESSION or AUTHENTICATED. Initially, the sessionState is UNKNOWN. After a call to authgear.configure, the session state would become AUTHENTICATED if a previous session was found, or NO_SESSION if such session was not found.

Fetching User Info

Using the Access Token in HTTP Requests

Next steps

Android SDK Reference

Footnote

The Authgear Android SDK provides an optional Okhttp interceptor which handles everything from refreshing the access token to putting the access token in the header.

Get the Extension

The extension is included in the SDK. Please refer to the above section for getting the SDK.

Usage

Configure OkHttpClient to use AuthgearInterceptor as follows:

Authgear authgear = // Obtain the authgear instance.
OKHttpClient client = new OkHttpClient.Builder()
            .addInterceptor(AuthgearInterceptor(authgear))
            .build()

The client would then include the access token in every request and refresh the access token when necessary before the requests.

Authgear is built based on OIDC 2.0 standard, you can integrate it into any application framework without SDK.

Supported grant types

Authorization Code Flow with Proof Key for Code Exchange (PKCE)

For public clients like mobile apps and SPAs, PKCE flow should be used. It uses code_challenge_method & code_challenge parameters in the authentication requests and the code_verifier parameter in the code exchange step. It ensures that the application that starts the code flow is the same one that finishes it.

OpenID Connect Configurations

This endpoint serves as a JSON document containing the OpenID Connect configuration of your Authgear project. That includes the authorization endpoint, the token endpoint, and the JWKs endpoint. The URL looks like:

https://AUTHGEAR_ENDPOINT/.well-known/openid-configuration

Initiate Signup and Login

To singup or login, redirect the user to the /authorize endpoint. The URL should look like this:

https://AUTHGEAR_ENDPOINT/oauth2/authorize
?response_type=code
&client_id=CLIENT_ID
&redirect_uri=REDIRECT_URL
&scope=openid+offline_access+https://authgear.com/scopes/full-userinfo
&code_challenge_method=S256
&code_challenge=CODE_CHALLENGE
&state=abc

Code Example

curl -X GET 'https://AUTHGEAR_ENDPOINT/oauth2/authorize' \
--data-urlencode 'response_type=code' \
--data-urlencode 'client_id=CLIENT_ID' \
--data-urlencode 'redirect_uri=REDIRECT_URL' \
--data-urlencode 'scope=openid offline_access https://authgear.com/scopes/full-userinfo' \
--data-urlencode 'code_challenge_method=S256' \
--data-urlencode 'code_challenge=CODE_CHALLENGE' \
--data-urlencode 'state=abc'

const randomData = secureRandomBytes(32); // (1)
const code_verifier = base64url(randomData); // (2) 
const hash = await sha256(utf8(code_verifier));
const code_challenge = base64url(hash);

// (1) A 32-byte long secure random data using secure random number generator
// (2) this string must be between 43 and 126 bytes long

const params = new URLSearchParams();
params.set("response_type", "code");
params.set("client_id", "CLIENT_ID");
params.set("redirect_uri", "REDIRECT_URL");
params.set("scope", ["openid", "offline_access", "https://authgear.com/scopes/full-userinfo"].join(" "));
params.set("code_challenge_method", "S256");
params.set("code_challenge", code_verifier);
params.set("state", "abc");

const endpoint = new URL("https://AUTHGEAR_ENDPOINT/oauth2/authorize");
const authorizationURL = endpoint.toString() + "?" + params.toString();

• “S256” is supported in code_challenge_method.

• The code_verifier is a string of length between 43 and 128 generated on the client side. It should be unique for each authorization request. The code_challenge is a SHA-256 hash of the verifier.

• The state parameter is optional. Authgear will include the value of the state parameter when redirecting the user back to the client application. Learn more at Use the OAuth 2.0 State Parameter

• After login, the user will be redirected to [redirect_uri]?code=[AUTH_CODE], the AUTH_CODE is needed in the next step

• See the supported scopes at Supported Scopes

Handling Callback

After receiving the AUTH_CODE in your application, make a POST request to the /token endpoint.

curl -X POST 'https://AUTHGEAR_ENDPOINT/oauth2/token' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'grant_type=authorization_code' \
-d 'client_id=CLIENT_ID' \
-d 'code=AUTH_CODE' \
-d 'redirect_uri=REDIRECT_URL' \
-d 'code_verifier=CODE_VERIFIER'

const tokenEndpoint = new URL("https://AUTHGEAR_ENDPOINT/oauth2/token");
const form = new URLSearchParams();
form.set("grant_type", "authorization_code");
form.set("client_id", "CLIENT_ID");
form.set("code", AUTH_CODE); //Authorization code returned from authgear server
form.set("redirect_uri", "REDIRECT_URL");
form.set("code_verifier", code_verifier);
const response = await fetch(tokenEndpoint.toString(), {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: form,
});
const responseJSON = await response.json();

• Include the code_verifier used for generating the code_challenge to prove both requests come from the same client.

• The response may contain the ID token, the access token and the refresh token depending on the scope supplied by the previous step.

Logout

When the user logs out, revoke the refresh token by making a POST request to the revocation_endpoint with the refresh token in the body in application/x-www-form-urlencoded as content-type. The endpoint looks like https://AUTHGEAR_ENDPOINT/oauth2/revoke, it can be found in OpenID Connect configuration document.

Then clear the access token and refresh token stored locally in your app.

Verifying JWT Access Token

Include the access token in the Authorization headers of the frontend requests to verify your user’s identity. Follow this guide to learn about validating the JWT in your application server Validate JWT in your application server

This guide provides instructions on integrating Authgear with a Flutter app. Supported platforms include:

• Flutter 2.5.0 or higher

• Android minimum SDK 30 (Android 11 or later)

Follow this guide to add Authgear to your Flutter app in 🕐 10 minutes.

Setup Application in Authgear

From the Project listing, create a new Project or select an existing Project. After that, we will need to create an application in the project.

Step 1: Create an application in the Portal

Go to Applications on the left menu bar.

You will see the "New Application" page or Click ⊕Add Application in the top tool bar.

Input the name of your application and select Native App as the application type. Click "Save".

You will see a list of guides that can help you for setting up, then click "Next".

Step 2: Configure the application

Head back to Authgear Portal, fill in the Redirect URI that you have defined in the previous step.

Click "Save" and note the Client ID. and Endpoint. You can also obtain them from the Applications list later.

Add User Authentication to Flutter App using Authgear SDK

In this part of the guide, we'll add user Authentication to a simple demo app using the Authgear Flutter SDK.

The demo app will have a login button that users can click to initiate the authentication flow. It will also include a group of widgets for greeting logged-in users, opening the user settings page, and logout.

Step 1: Create Flutter App

Run the following command to create a new Flutter project:

flutter create myapp
cd myapp

Step 2: Install Authgear SDK

Run the following command from the root directory of your Flutter project to install the Authgear SDK:

flutter pub add flutter_authgear

Step 3: Initialize Authgear

First, import Authgear at the top of lib/main.dart:

import 'package:flutter_authgear/flutter_authgear.dart';

Next, create a field variable _authgear of type Authgear and an _init() method in your page's State class:

late Authgear _authgear;

Future<void> _init() async {
  _authgear = Authgear(endpoint: "<AUTHGEAR_ENDPOINT>", clientID: "<ClIENT_ID>");
  await _authgear.configure();
}

class _MyHomePageState extends State<MyHomePage> {
  late Authgear _authgear;
  
  Future<void> _init() async {
    _authgear = Authgear(endpoint: "<AUTHGEAR_ENDPOINT>", clientID: "<ClIENT_ID>");
    await _authgear.configure();
  }
  
  @override
  Widget build(BuildContext context) {
  //other codes including wigdets for UI
  ...
  }
}

Replace "<AUTHGEAR_ENDPOINT>" and "<ClIENT_ID>" with the client ID and endpoint for the client application you created earlier.

Finally, override the initState() method for your State class to call your new _init() method. This will initiate a new instance of the Authgear SDK that you'll use to perform operations like starting an authentication flow.

@override
void initState() {
  super.initState();
  _init();
}

Step 4: Add Login Button

In this step, we'll add a login button and other UI widgets to our demo application.

To do that, first, add a _userInfo field variable to the State class:

UserInfo? _userInfo;

Our demo app will use the value of the _userInfo variable to determine when to show a login button or the group of widgets for logged-in users.

Next, replace the widget in body attribute of Scaffold with the following:

Center(
    child: (_userInfo != null) ?
        loggedInUserScreen(_userInfo!.sub)
        :
        Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
      Text("My Demo App"),
      TextButton(
      onPressed: _onPressedAuthenticate,
      child: Text("Login"),
    )])
    ,
)

Now implement the loggedInUserScreen() custom widget like this within the State class:

Widget loggedInUserScreen(String userId) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("Welcome user $userId"),
      TextButton(
          onPressed: _onPressedSettings,
          child: Text("User Settings"),
        ),
      TextButton(
          onPressed: _onPressedLogout,
          child: Text("Logout"),
        )
    ],
  );
}

In the next step, we'll implement the _onPressedAuthenticate() method.

Step 5: Start Authentication Flow

Here we will implement the _onPressedAuthenticate() method that will be called when a user clicks on the Login button.

Add the following method in the State class:

Future<void> _onPressedAuthenticate() async {
  try {
    final userInfo = await _authgear.authenticate(redirectURI: "com.example.authgeardemo.flutter://host/path");
    setState(() {
      _userInfo = userInfo;
    });
  } catch (e) {
    print(e);
  } finally {

  }
}

The above code calls the authenticate() method of the Authgear SDK. This will start a new authentication flow. Replace the value for the redirectURI argument with the redirect URI you registered in your client application.

Create empty _onPressedSettings() and _onPressedLogout() methods in your State class for now so that you can build application:

Future<void> _onPressedSettings() async {

}

Future<void> _onPressedLogout() async {

}

At this point, the full code for main.dart should look like this:

import 'package:flutter/material.dart';
import 'package:flutter_authgear/flutter_authgear.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late Authgear _authgear;
  UserInfo? _userInfo;

  @override
  void initState() {
    super.initState();
    _init();
  }

  Future<void> _init() async {
    _authgear = Authgear(endpoint: "<AUTHGEAR_ENDPOINT>", clientID: "<CLIENT_ID>");
    await _authgear.configure();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MyApp",
      home: Scaffold(
        appBar: AppBar(title: const Text("MyApp")),
        body: Center(
          child: (_userInfo != null) ?
              loggedInUserScreen(_userInfo!.sub)
              :
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                Text("My Demo App"),
                TextButton(
                onPressed: _onPressedAuthenticate,
                child: Text("Login"),
              )])
          ,
        )
      ),
    );
  }

  Future<void> _onPressedAuthenticate() async {
    try {
      final userInfo = await _authgear.authenticate(redirectURI: "com.example.authgeardemo.flutter://host/path");
      setState(() {
        _userInfo = userInfo;
      });
    } catch (e) {
      print(e);
    } finally {

    }
  }

  Future<void> _onPressedSettings() async {

  }

  Future<void> _onPressedLogout() async {
    
  }

  Widget loggedInUserScreen(String userId) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Welcome user $userId"),
        TextButton(
            onPressed: _onPressedSettings,
            child: Text("User Settings"),
          ),
        TextButton(
            onPressed: _onPressedLogout,
            child: Text("Logout"),
          )
      ],
    );
  }
}

Checkpoint

At this point, you can save your work and run the following command to test your app on a mobile device or emulator:

flutter run

When your app runs, you should see the Login button, clicking on it should start a new Authentication. However, you may not be able to complete authentication because we're yet to configure our app to handle redirect from Authgear.

Step 6: Setup redirect URI for your app

To finish the integration, setup the app to handle the redirectURI specified in the application. This part requires platform specific integration.

Here you declare the URL schemes supported by your app, so the device can redirect the user to the app after authentication using the redirect URI.

Android

Add the following <activity> entry to the /android/app/src/main/AndroidManifest.xml of your app. The intent system would dispatch the redirect URI to OAuthRedirectActivity and the SDK would handle the rest.

<!-- Your application configuration. Omitted here for brevity -->
<application>
  <!-- Other activities or entries -->

  <!-- Add the following activity -->
  <!-- android:exported="true" is required -->
  <!-- See https://developer.android.com/about/versions/12/behavior-changes-12#exported -->
  <activity android:name="com.authgear.flutter.OAuthRedirectActivity"
            android:exported="true"
            android:launchMode="singleTask">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <!-- Configure data to be the exact redirect URI your app uses. -->
                <!-- Here, we are using com.authgear.example://host/path as configured in authgear.yaml. -->
                <!-- NOTE: The redirectURI supplied in AuthenticateOptions *has* to match as well -->
                <data android:scheme="com.example.authgeardemo.flutter"
                    android:host="host"
                    android:pathPrefix="/path"/>
            </intent-filter>
  </activity>
</application>

You also need to add a queries section to AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Other elements such <application> -->
  <queries>
    <intent>
      <action android:name="android.support.customtabs.action.CustomTabsService" />
    </intent>
  </queries>
</manifest>

Remove the following line from AndroidManifest.xml because this setting conflicts with the SDK:

android:taskAffinity=""

Next, open /android/app/build.gradle and set minSdk to 30:

android {
    ...
    defaultConfig {
        applicationId = "com.example.myapp"
        minSdk = 30 // specify minSdk to 30
        targetSdk = flutter.targetSdkVersion
        versionCode = flutter.versionCode
        versionName = flutter.versionName
    }
}

iOS

Declare URL Handling in Info.plist

In the Info.plist in your project's ios folder, add the matching redirect URI by adding the key CFBundleURLTypes and the values inside <dict> as shown as the following example.

<?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>
      <!-- Other entries -->
      <key>CFBundleURLTypes</key>
      <array>
              <dict>
                      <key>CFBundleTypeRole</key>
                      <string>Editor</string>
                      <key>CFBundleURLSchemes</key>
                      <array>
                              <string>com.example.authgeardemo.flutter://host/path</string>
                              <!-- Put the redirect URI your app uses here. -->
                      </array>
              </dict>
      </array>
</dict>
</plist>

Now if you run your app again, you should be able to login, be redirected back to your app and view the group of widgets that's for logged-in users.

Step 7: Logout

To log out the user from the current app session, you need to invoke thelogout method of the SDK.

Update the empty _onPressedLogout you added earlier so that it calls the logout method.

Future<void> _onPressedLogout() async {
  await _authgear.logout();    
  setState(() {
      _userInfo = null;
  });
}

Step 8: Open User Settings Page

Authgear provides a pre-built user settings page from which your users can view and edit their profile details, and change security settings like password, and 2FA.

The SDK includes a method that you can use to easily open this user settings page.

Update the empty _onPressedSettings method you added earlier so it initiates the process of opening the user settings page.

Future<void> _onPressedSettings() async {
  await _authgear.open(page: SettingsPage.settings);
}

Step 9: Show User Info

At this point, our application already shows the current user's info (their unique ID, sub). However, the Authgear SDK includes a getUserInfo() method that you can call explicitly to get an object that contains the current user's information like their email, phone number, name, etc.

Calling this getUserInfo() method can also refresh the current user's access token to make sure that their session state is really authenticated, that is, an logged-in user is not using an expired access token.

Update your _init() method to check the user's logged-in state and fetch their user info when the state is SessionState.authenticated.

Future<void> _init() async {
  _authgear = Authgear(endpoint: "<AUTHGEAR_ENDPOINT>", clientID: "<CLIENT_ID>");
  await _authgear.configure();
  if (_authgear.sessionState == SessionState.authenticated) {
    final userInfo = await _authgear.getUserInfo();
    setState(() {
      _userInfo = userInfo;
    });
  }
}

Additional Actions

Get the Logged In State

When you start launching the application. You may want to know if the user has logged in. (e.g. Show users the login page if they haven't logged in). The sessionState reflects the user logged in state in the SDK local state. That means even the sessionState is SessionState.authenticated, the session may be invalid if it is revoked remotely. After initializing the Authgear SDK, call fetchUserInfo to update the sessionState as soon as it is proper to do so.

// After authgear.configure, it only reflect SDK local state.
// value can be SessionState.noSession or SessionState.authenticated
SessionState state = _authgear.sessionState;

UserInfo? userInfo;
try {
  userInfo = await _authgear.getUserInfo();
  // read the userInfo if needed
} catch (e) {
  // failed to fetch user info
  // the refresh token maybe expired or revoked
}
// sessionState is now up to date
// it will change to SessionState.noSession if the session is invalid
state = _authgear.sessionState;

The value of sessionState can be SessionState.unknown, SessionState.noSession or SessionState.authenticated. Initially, the sessionState is SessionState.unknown. After a call to authgear.configure, the session state would become SessionState.authenticated if a previous session was found, or SessionState.noSession if such session was not found.

Using the Access Token in HTTP Requests

To include the access token to the HTTP requests to your application server, use wrapHttpClient.

The wrapped client will include the Authorization header in every HTTP request, and refresh access token automatically.

final originalClient = ...
final client = _authgear.wrapHttpClient(originalClient);

Next steps

To protect your application server from unauthorized access. You will need to integrate your backend with Authgear.

Flutter SDK Reference

This guide provides instructions on integrating Authgear with a Xamarin app. Supported packages include:

• Xamarin.Essentials 1.7.2 or higher

• Xamarin.Forms 5.0.0.2401 or higher

Setup Application in Authgear

From the Project listing, create a new Project or select an existing Project. After that, we will need to create an application in the project.

Create a Xamarin app

• Open Visual Studio

• Create a new project

• Choose the Xamarin.Forms template

Install the SDK

• Authgear.Xamarin targets MonoAndroid 12.0 on Android, and Xamarin.iOS10 on iOS. Update the target framework of the Android and iOS projects to match Authgear.Xamarin's target frameworks.

• Update Android and iOS project's Xamarin.Essentials to 1.7.2.

Platform Integration

To finish the integration, setup the app to handle the redirectURI specified in the application. This part requires platform specific integration.

Android

Define your own callback activity

using System;

using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.OS;
using Authgear.Xamarin;
using Xamarin.Forms;

namespace MyApp.Droid
{
    [Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
    [IntentFilter(new[] { Android.Content.Intent.ActionView },
        Categories = new[] { Android.Content.Intent.CategoryDefault, Android.Content.Intent.CategoryBrowsable },
        DataScheme = "com.myapp.example")]
    public class WebAuthenticationCallbackActivity : Xamarin.Essentials.WebAuthenticatorCallbackActivity
    {
    }
}

Targeting API level 30 or above (Android 11 or above)

If your Android app is targeting API level 30 or above (Android 11 or above), you need to add a queries section to AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Other elements such <application> -->
  <queries>
    <intent>
      <action android:name="android.support.customtabs.action.CustomTabsService" />
    </intent>
  </queries>
</manifest>