Authgear
Start BuildingHomePortalCommunity
  • Authgear Overview
  • Get Started
    • Start Building
    • 5-Minute Guide
    • Single-Page App
      • JavaScript (Web)
      • React
      • Angular
      • Vue
    • Native/Mobile App
      • iOS SDK
      • Android SDK
        • Android Kotlin coroutine support
        • Android OKHttp Interceptor Extension (Optional)
      • Flutter SDK
      • React Native SDK
      • Ionic SDK
      • Xamarin SDK
      • Using Authgear without SDK (Client side)
    • Regular Web App
      • Express
      • Next.js
      • Python Flask App
      • Java Spring Boot
      • ASP.NET Core MVC
      • Laravel
      • PHP
    • Backend/API Integration
      • Validate JWT in your application server
      • Forward Authentication to Authgear Resolver Endpoint
    • AI Coding tools
      • Cursor/Windsurf
  • How-To Guides
    • Authenticate
      • Add Passkeys Login
      • Add WhatsApp OTP Login
      • Add Email Magic Link Login
      • Add Biometric Login
      • Add Anonymous Users
      • Add authentication to any web page
      • Enable Two-Factor Authentication (2FA)
      • How to Use the OAuth 2.0 State Parameter
      • Reauthentication
      • How to Use Social/Enterprise Login Providers Without AuthUI
      • Passwordless Login for Apple App Store Review
      • Setup local development environment for Cookie-based authentication
      • Forgot/Reset Password settings
      • Phone number validation
      • Set Password Expiry
    • Single Sign-on
      • App2App Login
      • Pre-authenticated URLs
      • SSO between Mobile Apps / Websites
      • Force Authgear to Show Login Page
      • Single Sign-On with OIDC
      • Single Sign-On with SAML
        • Use Authgear as SAML Identity Provider for Salesforce
        • Use Authgear as SAML Identity Provider for Dropbox
        • SAML Attribute Mapping
    • Social Login / Enterprise Login Providers
      • Social Login Providers
        • Connect Apps to Apple
        • Connect Apps to Google
        • Connect Apps to Facebook
        • Connect Apps to GitHub
        • Connect Apps to LinkedIn
        • Connect Apps to WeChat
      • Enterprise Login Providers
        • Connect Apps to Azure Active Directory
        • Connect Apps to Microsoft AD FS
        • Connect Apps to Azure AD B2C
      • Force Social/Enterprise Login Providers to Show Login Screen
    • Built-in UI
      • Branding in Auth UI
      • User Settings
      • Privacy Policy & Terms of Service Links
      • Customer Support Link
      • Custom Text
    • Custom UI
      • Authentication Flow API
      • Implement Authentication Flow API using Express
      • Implement Authentication Flow API using PHP
      • Add Custom Login/Signup UI to Native Apps
      • Manually Link OAuth Provider using Account Management API
      • Implement a custom account recovery UI using Authentication Flow API
    • Integrate
      • Add custom fields to a JWT Access Token
      • User Analytics by Google Tag Manager
      • Track User Before and After Signup
      • Custom domain
      • Custom Email Provider
      • Custom SMS Provider
        • Twilio
        • Webhook/Custom Script
    • Monitor
      • Audit Log For Users Activities
      • Audit Log for Admin API and Portal
      • Analytics
    • User Management
      • Account Deletion
      • Import Users using User Import API
      • Export Users using the User Export API
      • Manage Users Roles and Groups
      • How to Handle Password While Creating Accounts for Users
    • User Profiles
      • What is User Profile
      • Access User Profiles
      • Update User Profiles
      • Profile Custom Attributes
      • Update user profile on sign-up using Hooks
    • Events and Hooks
      • Event List
      • Webhooks
      • JavaScript / TypeScript Hooks
      • Only Allow Signups from Inside the Corporate Network using Hooks
    • Mobile Apps
      • Use SDK to make authorized API calls to backend
      • Force authentication on app launch
      • Customize the Login Pop-up / Disable the login alert box
    • Languages and Localization
    • Custom Email and SMS Templates
    • Directly accessing Authgear Endpoint
    • Migration
      • Bulk migration
      • Rolling migration
      • Zero-downtime migration
    • Troubleshoot
      • How to Fix SubtleCrypto: digest() undefined Error in Authgear SDK
      • How to Fix CORS Error
  • Concepts
    • Identity Fundamentals
    • Authgear use cases
    • User, Identity and Authenticator
  • Security
    • Brute-force Protection
    • Bot Protection
    • Non-HTTP scheme redirect URI
    • Password Strength
  • Reference
    • APIs
      • Admin API
        • Authentication and Security
        • API Schema
        • Admin API Examples
        • Using global node IDs
        • Retrieving users using Admin API
        • User Management Examples
          • Search for users
          • Update user's standard attributes
          • Update user's picture
          • Generate OTP code
      • Authentication Flow API
      • OAuth 2.0 and OpenID Connect (OIDC)
        • UserInfo
        • Supported Scopes
      • User Import API
      • User Export API
    • Tokens
      • JWT Access Token
      • Refresh Token
    • Glossary
    • Billing FAQ
    • Rate Limits
      • Account Lockout
  • Client App SDKs
    • Javascript SDK Reference
    • iOS SDK Reference
    • Android SDK Reference
    • Flutter SDK Reference
    • Xamarin SDK Reference
  • Deploy on your Cloud
    • Running locally with Docker
    • Deploy with Helm chart
    • Authenticating HTTP request with Nginx
    • Configurations
      • Environment Variables
      • authgear.yaml
      • authgear.secrets.yaml
    • Reference Architecture Diagrams
      • Google Cloud Reference Architecture
      • Azure Reference Architecture
      • AWS Reference Architecture
      • Throughput Scaling Reference
Powered by GitBook
On this page
  • Account Management API for OAuth Provider
  • 1. /api/v1/account/identification
  • 2. /api/v1/account/identification/oauth
  • How to Link OAuth Provider
  • Step 1: User Login (Get Access Token)
  • Step 2: Initiate OAuth Link Flow
  • Step 3: Get OAuth Provider's Authorization URL
  • Step 4: Finish Linking Account

Was this helpful?

Edit on GitHub
  1. How-To Guides
  2. Custom UI

Manually Link OAuth Provider using Account Management API

Use the Account Management API to link OAuth provider.

The Management API provides a way to perform actions that you usually will do from the default /settings page using your own custom UI.

Account Management API for OAuth Provider

The account management API for OAuth providers allows developers to write their own custom code for linking a social or enterprise (OAuth) provider to user accounts on their Authgear provider. Developers can use this API to create a custom UI that their users can use to link one or more social login providers to their accounts.

The account management API for OAuth Provider has 2 endpoints that your code must make HTTP(s) POST requests to. A detailed description of the endpoints is given below:

1. /api/v1/account/identification

Use this endpoint to initiate the flow of linking an OAuth provider to an account. The endpoint requires a valid access token for the current user in the Bearer Authorization header.

Request Method:

POST

Request Header:

{
    "Authorization": "Bearer " + <ACCESS_TOKEN>
}

Request Body:

{
    "identification": "oauth",
    "alias": "google",
    "redirect_uri": "http://localhost:3000/linkcallback",
    "exclude_state_in_authorization_url": false
}
  • identification: Required. It must be the value oauth.

  • alias: Required. The alias of the OAuth provider you want the current account to associate with.

  • redirect_uri: Required. You have to specify your own redirect URI to your app or your website to receive the OAuth callback.

  • exclude_state_in_authorization_url: Optional. The default is false. When it is false, the authorization_url has a state parameter included, the token is bound to this state parameter. When it is true, the authorization_url has no state parameter included, the token is NOT bound to state. If you wish to use your own state, you must set this field to true.

Response:

{
  "result": {
    "token": "oauthtoken_abc123xyz",
    "authorization_url": "https://www.google.com?client_id=client_id&redirect_uri=redirect_uri"
  }
}
  • token: You store this token. You need to supply it after the end-user returns to your app.

  • authorization_url: You MUST redirect the end-user to this URL to continue the authorization code flow. If exclude_state_in_authorization_url is false, it has the state parameter included.

2. /api/v1/account/identification/oauth

Call this endpoint from your redirect URI to finish the process of linking an OAuth provider.

Request Method:

POST

Request Header:

{
    "Authorization": "Bearer " + <ACCESS_TOKEN>
}

Request Body:

{
    "token": <TOKEN>,
    "query": <URL_QUERY>
}
  • query: The query of the redirect URI.

Response:

{"result":{}}

How to Link OAuth Provider

In this example, we'll link Google as the OAuth provider.

Step 1: User Login (Get Access Token)

The account manage API requires a user's valid access token to work. Hence, you must first authenticate the user using another identity first.

Set up your application to allow users to log in using Authgear and obtain an access token.

Step 2: Initiate OAuth Link Flow

Now that your application can obtain a valid access token for a user, you'll make an HTTP(s) request to the /api/v1/account/identification endpoint to initiate the OAuth provider linking flow.

Use the following code to send the HTTP(s) request:

app.get("/link", async (req, res) => {
    const endpoint = `<YOUR_AUTHGEAR_ENDPOINT>/api/v1/account/identification`;
    const accessToken = req.session.accessToken; //TODO Get access token for user here. The example retrieves the value stored in session cookies
    
    try {
    
        const initiateAccountLink = await axios.post(endpoint, 
        {
            "identification": "oauth",
            "alias": "google",
            "redirect_uri": `http://localhost:3000/linkcallback`,
            "exclude_state_in_authorization_url": false
        }, {
            headers: { "Authorization": "Bearer " + accessToken }
        });
        req.session.token = initiateAccountLink.data.result.token;
        
        res.send("linking initiated!"); // TODO Replace this link with Login with provider link instead
    } catch(error) {
        let errorInfo = error;
        if (error.response) {
            errorInfo = error.response.data;
        }
        res.send("An error occurred " + JSON.stringify(errorInfo));
    }

});

In the code above, the body of the HTTP(S) request includes the identification type which is oauth because we're trying to add a new OAuth Provider as an identity for a user's account. The value of alias is google because the OAuth provider to be added is Google.

The link in redirect_uri is a page on the example application that will handle the callback from the OAuth provider. We will implement this page in the next step.

The response from the /api/v1/account/identification endpoint should look like this:

{
  "result": {
    "token": "oauthtoken_abc123xyz",
    "authorization_url": "https://www.google.com?client_id=client_id&redirect_uri=redirect_uri"
  }
}

Step 3: Get OAuth Provider's Authorization URL

The response for the HTTP(s) request in Step 2 includes an authorization_url field. That field contains the OAuth provider's authorization URL. Your application can redirect users to authorization_url for them to grant authorization on the OAuth provider's website.

Replace the line with // TODO in Step 2 with the following code to use the value of authorization_url in a hyperlink that users can click:

res.send(`
    <a href="${initiateAccountLink.data.result.authorization_url}">Link Google Account</a>
    `);

Step 4: Finish Linking Account

The final step for linking an OAuth provider is to implement the callback URL that the OAuth provider will be redirecting users back to after authorization. This is where your application will be making an HTTP(S) request to the second endpoint (/api/v1/account/identification/oauth).

For this example, we'll create a "/linkcallback" route to handle the redirect using the following code:

app.get('/linkcallback', async (req, res) => {
    const endpoint = `<YOUR_AUTHGEAR_ENDPOINT>/api/v1/account/identification/oauth`;
    const accessToken = req.session.accessToken;
    const currentUrl = `${req.protocol}://${req.get('host')}${req.originalUrl}`;
    const queryParams = new URL(currentUrl).search;;
    
    try {
        const finishLink = await axios.post(endpoint, {
            "token": req.session.token,
            "query": queryParams,
        }, 
        {
            headers: { "Authorization": "Bearer " + accessToken }
        });
    
        res.send(JSON.stringify(finishLink.data));
    } catch(error) {
        let errorInfo = error;
        if (error.response) {
            errorInfo = error.response.data;
        }
        res.send("An error occurred " + JSON.stringify(errorInfo));
    }

});

The above code sends the token (returned in the response to the previous HTTP(S) request) and the query parameters added to the redirect URI by the OAuth provider in an HTTP(S) request to the finish endpoint. Both parameters are required.

The following will be the response of the endpoint when the OAuth provider is linked successfully:

{"result":{}}
PreviousAdd Custom Login/Signup UI to Native AppsNextImplement a custom account recovery UI using Authentication Flow API

Last updated 9 months ago

Was this helpful?

token: The token you received in the response of the endpoint.

See our section for a detailed guide for your preferred programming language or framework.

Getting Started
/api/v1/account/identification