All pages
Powered by GitBook
1 of 13

Social Login / Enterprise Login Providers

Add third-party identity providers to enable frictionless sign in for your users

Authgear supports the following social and enterprise identity providers. Please click the link below for setup instructions.

  • Apple

  • Google

  • Facebook

  • GitHub

  • Linkedin

  • Azure Active Directory

  • Azure AD B2C

  • Microsoft AD FS

  • WeChat

Social Login Providers

Guides on how to add social login providers like Facebook, Google, LinkedIn Apple

Connect Apps to AppleConnect Apps to GoogleConnect Apps to GitHubConnect Apps to LinkedInConnect Apps to WeChat

Connect Apps to Apple

Prerequisite

To configure "Sign in with Apple" for Authgear, you will need to fulfil the following:

  1. Register an Apple Developer Account. Apple Enterprise Account does not support "Sign in with Apple"

  2. Register your own domain.

  3. Your domain must be able to send and receive emails.

  4. Set up Sender Policy Framework(SPF) for your domain.

  5. Set up DomainKeys Identified Mail(DKIM) for your domain.

  6. Create an "App ID" by adding a new "Identifier" here, choose app IDs, enable "Sign in with Apple" enabled.

  7. Create a "Services ID" by adding a new "Identifier" here, choose service IDs, enable "Sign in with Apple".

  8. Click "Configure" the Next to "Sign in with Apple". In "Primary App ID" field, select app ID created above.

  9. Fill in and verify the domain created above, add https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/apple to Return URLs

  10. Create a "Key" following this guide with "Sign in with Apple" enabled. Click "Configure" next to "Sign in with Apple" and select "Primary App ID" with app ID created above. Keep the private key safe, you need to provide this later.

Redirect URI has the form of /sso/oauth2/callback/:alias. The alias is used as the identifier of OAuth provider. You can configure the alias in Authgear Portal.

Configure Sign in with Apple in Authgear Portal

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Sign in with Apple.

  3. Fill in the Client ID with the Service ID obtained above.

  4. In Apple Developer Portal, view key information of the "Key" created above.

  5. Jot down the Key ID and download the key text file (.p8 file).

  6. Copy the content in the key text file to Client Secret text area in Authgear Portal..

  7. Fill in Key ID field using the Key ID obtained from step 5.

  8. In Apple Developer Portal, click username on the top right corner, click View Membership.

  9. Find the Team ID from Membership Information, fill in Team ID field in Authgear portal.

  10. Save the settings.

🎉Done! You have just added Sign in with Apple to your apps!

Connect Apps to Google

Add Google Sign in to your apps in less than 5 minutes.

Set up OAuth client on Google Cloud Platform

To configure Google OAuth client for Authgear, you will need to create an OAuth client on Google Cloud Platform first.

Create a new project

Create a project on Google Cloud Platform through console. If you are adding Authgear to your existing Google Cloud Platform projects, you may skip to the next step to create the OAuth client.

Create OAuth Consent Screen

After creating a new project, you will need to configure the OAuth consent screen. Press the button on the top-left and go to APIs & Services -> OAuth consent screen and follow the instruction to create the consent screen.

Create OAuth client ID

  1. Go to -> APIs & services -> Credentials

  2. Click Create Credentials -> OAuth client ID

  3. Choose Web application in Application type and assign a name as reference. You should always choose Web application here regardless of the platform of the app you are creating. It is because this OAuth Client ID is used by your Authgear services, which is a web application in Google’s classification.

  4. Add https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/google to redirect URIs.

  5. After creating a client ID, you will see the client ID under the OAuth 2.0 Client IDs section of the Credentials page.

OAuth Client ID in the Credentials page

Redirect URI has the form of /sso/oauth2/callback/:alias. The alias is used as the identifier of OAuth provider. You can configure the alias in Authgear Portal.

You can find more details in official Google Cloud Platform doc

Configure Sign in with Google in Authgear Portal

Get your OAuth Client details

After creating an OAuth client, click the name of OAuth client to view the details.

Get your OAuth Client ID and Secret in the details page

You will need the values of Client ID, Client secret to configure Google Sign In.

Configure in Authgear Portal

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Sign in with Google.

  3. Fill in the Client ID and Client Secret with the values obtained from the previous step.

  4. Save the settings.

🎉Done! You have just added Google Sign In to your apps!

Your end-users can now sign in with Google on Authgear pre-built Log In and Sign Up page. Existing end-users can connect their account to Google in the User Settings page.

"Sign in with Google" in Log in and Sign up page
Your end-users can connect to their Google account in User Settings page

Connect Apps to Facebook

Add Facebook Sign in to your apps in less than 5 minutes.

This guide shows how to connect your Authgear application to Facebook so users can log in using the Login with Facebook feature.

Step 1: Create an App in Facebook for Developers

If you are using Authgear in your existing Facebook Apps, you may skip to the next step to set up the OAuth client.

Prerequisite

You will need a Facebook developer Account. Register as one by clicking Get Started in the Facebook for Developers website.

Create an App

To create a new app, go to the Facebook Developers Apps panel then click the Click Create App button.

On the next screen, select Other as your app use case then, click Next.

In the app type selection screen, pick the option that best meets your requirements. For our example, we'll select the Consumer app type.

Enter your app name on the next screen and finish the app creation process.

Step 2: Set up the OAuth Client

  1. In the app panel, click Add Product next to Products in the sidebar.

  2. Click the Set Up button in Facebook Login.

  3. Go to Settings of Facebook Login.

  4. Make sure Client OAuth Login and Web OAuth Login are enabled.

  5. Add https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/facebook to Valid OAuth Redirect URIs and save the changes.

Redirect URI has the form of https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/:alias. The alias is used as the identifier of OAuth provider. You can configure the alias in Authgear Portal.

See Your Authgear Endpoint for instructions on how to get the value for YOUR_AUTHGEAR_ENDPOINT.

Step 3: Configure Login with Facebook in Authgear Portal

Get your OAuth Client details

After setting up the Facebook Login product, go to App settings > Basic in the sidebar.

You will need the App ID and App Secret to configure Facebook Login so, note them down.

Configure in Authgear Portal

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Login with Facebook.

  3. Fill in the Client ID with the App ID obtained from the Facebook Developers portal in the previous step.

  4. Save the settings.

🎉 Done! You have just added Facebook Login to your apps!

Your end-users can now sign in with Facebook on Authgear's pre-built Log In and Sign Up page. Existing end-users can connect their account to Facebook in the User Settings page.

Your end-users can connect to their Facebook account in User Settings page

Connect Apps to GitHub

Prerequisite

  1. Follow the official guide to create a OAuth App.

  2. In "Authorization callback URL", use https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/github.

  3. After the creation, click "Generate a new client secret". Remember the client secret.

Configure Sign in with GitHub through the portal

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Sign in with GitHub.

  3. Fill in Client ID.

  4. Fill in Client Secret.

  5. Save the changes.

🎉 Done! You have just added GitHub integration to your apps!

Connect Apps to LinkedIn

Prerequisite

  1. Create an app in the Linkedin Developers Portal.

  2. In the "Products" section, choose "Sign In with LinkedIn"

  3. In the details page of the created app, click the "Auth" tab

  4. Take notes of "Client ID" and "Client Secret", add https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/linkedin to "Redirect URLs" in "OAuth 2.0 settings" section

Redirect URI has the form of /sso/oauth2/callback/:alias. The alias is used as the identifier of OAuth provider. You can configure the alias in Authgear Portal

Configure Sign in with LinkedIn through the portal

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Sign in with LinkedIn.

  3. Fill in Client ID.

  4. Fill in Client Secret.

  5. Save the settings.

🎉 Done! You have just added Linkedin Login to your apps!

Connect Apps to WeChat

Web

Prerequisite

To create a website application in WeChat, you can choose to setup a website application and wait for approval or a sandbox account for testing.

Setup the Website Application (网站应用)

  • Register an account in WeChat Open Platform.

  • Create Website Application (网站应用), fill in information and wait for approval (It may take few days).

  • View the application detail page, obtain the "AppID" and "AppSecret" on the top of the application page.

  • Go to Account Center > Basic information, to obtain the "原始ID".

Setup the Sandbox Application (微信公众平台接口测试帐号)

  • Use your WeChat app to login in 微信公众平台接口测试帐号申请.

  • Obtain the "appID", "appSecret" and "原始ID". The "原始ID" is the "微信号" in the top right corner.

  • Fill in 接口配置信息. The URL must be pointing at a publicly reachable server. The token is a string of your choice.

  • Implement the 接口配置信息 server. Here is an example written in Golang.

package main

import (
    "crypto/sha1"
    "crypto/subtle"
    "encoding/hex"
    "fmt"
    "io"
    "net/http"
    "sort"
    "strings"
)

type WechatVerifyHandler struct {
    Token string
}

func (h *WechatVerifyHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    err := r.ParseForm()
    if err != nil {
        http.Error(w, err.Error(), http.StatusBadRequest)
        return
    }

    signature := r.Form.Get("signature")
    timestamp := r.Form.Get("timestamp")
    nonce := r.Form.Get("nonce")
    echostr := r.Form.Get("echostr")

    token := h.Token

    tmpArr := []string{token, timestamp, nonce}
    sort.Strings(tmpArr)

    tmpStr := strings.Join(tmpArr, "")

    hasher := sha1.New()
    io.WriteString(hasher, tmpStr)
    computedHash := hasher.Sum(nil)
    computedhashInHex := hex.EncodeToString(computedHash)

    if subtle.ConstantTimeCompare([]byte(signature), []byte(computedhashInHex)) == 1 {
        w.Write([]byte(echostr))
        return
    }

    http.Error(w, fmt.Sprintf("%v != %v", signature, computedhashInHex), http.StatusBadRequest)
}

func main() {
    http.Handle("/", &WechatVerifyHandler{
        Token: "TOKEN", // Change this value to the value you told Wechat!
    })
    http.ListenAndServe(":9999", nil)
}
  • Fill in JS接口安全域名. The value is your Authgear domain name plus port, e.g. 192.168.2.88:3000 or myapp.authgear.cloud

  • Fill in 网页授权获取用户基本信息. The value is your Authgear domain name plus port, e.g. 192.168.2.88:3000 or myapp.authgear.cloud

  • Look for an QR code in the sandbox settings page. You must scan it with your Wechat app and follow the sandbox account.

Configure Sign in with WeChat through the Authgear portal

In the portal, do the following:

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Sign in with WeChat (Web/网站应用).

  3. Fill in Client ID with the AppID.

  4. Fill in Client Secret with the AppSecret.

  5. Fill in 原始 ID with the 原始 ID.

  6. Check the checkbox Is Sandbox account if you are using sandbox account.

  7. Save the settings.

Mobile app (Native iOS app, Native Android app, React Native, and Flutter)

Overview of Setting Up Wechat

Wechat integration is a bit more complicated then other social login, here are the overview of what needs to be done:

  • Register an account and create mobile application in WeChat Open Platform. Approval is needed in this process.

  • Enable and configure WeChat Login in Authgear portal.

  • Include Authgear SDK on your app.

  • Implement a delegate function to be triggered when user clicks the "Login with WeChat" button during authorization. You need to integrate WeChat SDK to open WeChat app to perform authentication in the delegate function (we have sample code below). After obtaining the authorization code from WeChat, call the Authgear callback with the auth code and complete the "Login With WeChat" process.

Here are the detailed steps for iOS, Android, React Native, and Flutter.

Prerequisite - Setup the Mobile Application (移动应用)

  • Register an account in WeChat Open Platform.

  • Create Mobile Application (移动应用), fill in information and wait for approval (It may take few days).

  • View the application detail page, obtain the AppID and AppSecret on the top of the page.

  • Go to Account Center > Basic information, to obtain the "原始ID".

  • Save those values, we will need them in the section below.

Update code based on platform

Native iOS application

  • Setup Authgear iOS SDK.

  • Follow iOS接入指南 to setup WeChat SDK. For the coding part, we will further explain in the below steps.

  • WechatOpenSDK is Objective-C library. If you are using swift. You will need to create bridging header. To setup bridge header, please check Importing Objective-C into Swift. Here is the example WechatOpenSDK-Bridging-Header.h.

      #ifndef WechatOpenSDK_Bridging_Header_h
      #define WechatOpenSDK_Bridging_Header_h
    
      #import "WXApiObject.h"
      #import "WXApi.h"
    
      #endif
  • After setting up the WechatOpenSDK, universal link should be enabled in your application. We will need two links for the setup. One is for the WeChat SDK used, another is for the Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here are the suggestion of the links.

    • WECHAT_UNIVERICAL_LINK: https://{YOUR_DOMAIN}/wechat

    • WECHAT_REDIRECT_URI_FOR_AUTHGEAR: https://{YOUR_DOMAIN}/open_wechat_app

  • Login WeChat Open platform, open the application detail page, update the development information iOS section.

  • Fill in "Bundle ID" field with your app bundle id.

  • Fill in "Universal Links" with "WECHAT_UNIVERICAL_LINK" above.

  • Go to Authgear portal, do the following:

    • In the portal, go to Authentication > Social / Enterprise Login.

    • Enable Sign in with WeChat (Mobile/移动应用).

    • Fill in Client ID with the AppID.

    • Fill in Client Secret with the AppSecret.

    • Fill in 原始 ID with the 原始 ID.

    • Add WECHAT_REDIRECT_URI_FOR_AUTHGEAR above in WeChat redirect URIs.

    • Save the settings.

  • Update the code

    • Setup WeChat SDK when app launch

        // Replace WECHAT_APP_ID with wechat app id
        // Replace WECHAT_UNIVERICAL_LINK with the link defined above
        WXApi.registerApp("WECHAT_APP_ID", universalLink: "WECHAT_UNIVERICAL_LINK")
        WXApi.startLog(by: .detail) { log in
            print(#line, "wechat sdk wxapi: " + log)
        }
    • Setup Authgear delegate and call WeChat SDK when sendWechatAuthRequest is triggered

        // Replace self with the object that you implement the AuthgearDelegate
        authgear.delegate = self
      
        // Replace WECHAT_APP_ID with wechat app id
        extension MyClass: AuthgearDelegate {
            func sendWechatAuthRequest(_ state: String) {
                let req = SendAuthReq()
                req.openID = "WECHAT_APP_ID"
                req.scope = "snsapi_userinfo"
                req.state = state
                WXApi.send(req)
            }
        }
    • Handle universal link

        // Update App Delegate
        func application(_ application: NSApplication,
                        continue userActivity: NSUserActivity,
                        restorationHandler: @escaping ([NSUserActivityRestoring]) -> Void) -> Bool {
            // wechat sdk handle, replace self with object implement WXApiDelegate
            WXApi.handleOpenUniversalLink(userActivity, delegate: self)
            // authgear sdk handle
            return authgear.application(application, continue: userActivity, restorationHandler: restorationHandler)
        }
      
        // If your app has opted into Scenes, Update Scene Delegate
        func scene(_ scene: UIScene, continue userActivity: NSUserActivity) {
            // wechat sdk handle, replace self with object implement WXApiDelegate
            WXApi.handleOpenUniversalLink(userActivity, delegate: self)
      
            // authgear sdk handle
            authgear.scene(scene, continue: userActivity)
        }
      
        // Implement WXApiDelegate
        extension MyClass: WXApiDelegate {
            func onReq(_ req: BaseReq) {}
            func onResp(_ resp: BaseResp) {
                // Receive code from WeChat, send callback to authgear
                // by calling `authgear.wechatAuthCallback`
                if resp.isKind(of: SendAuthResp.self) {
                    if resp.errCode == 0 {
                        let _resp = resp as! SendAuthResp
                        if let code = _resp.code, let state = _resp.state {
                            authgear.wechatAuthCallback(code: code, state: state) { result in
                                switch result {
                                case .success():
                                    // send wechat auth callback to authgear successfully
                                case let .failure(error):
                                    // failed to send wechat auth callback to authgear
                                }
                            }
                        }
                    } else {
                        // failed to obtain code from wechat sdk
                    }
                }
            }
        }
    • Provide wechatRedirectURI when calling authenticate and promoteAnonymousUser in authgear sdk

        // Replace "WECHAT_REDIRECT_URI_FOR_AUTHGEAR" with link defined above
        container?.authenticate(
            redirectURI: "REDIRECT_URI",
            prompt: "login",
            wechatRedirectURI: "WECHAT_REDIRECT_URI_FOR_AUTHGEAR"
        ) { result in
        }
      
        // For anonymous user support only
        // Replace "WECHAT_REDIRECT_URI_FOR_AUTHGEAR" with link defined above
        container?.promoteAnonymousUser(
            redirectURI: "REDIRECT_URI",
            wechatRedirectURI: "WECHAT_REDIRECT_URI_FOR_AUTHGEAR"
        ) { result in
        }
      
        // Open setting page
        // Replace "WECHAT_REDIRECT_URI_FOR_AUTHGEAR" with link defined above
        container?.open(
            page: .settings,
            wechatRedirectURI: "WECHAT_REDIRECT_URI_FOR_AUTHGEAR"
        )
  • Here is the completed example.

Native Android application

  • Setup Authgear iOS SDK.

  • Follow Android接入指南 to setup Wechat SDK. For the coding part, we will further explain in the below steps.

  • Login WeChat Open platform, open the application detail page, update the development information Android section.

  • Fill in application signature, you can obtain it with command keytool -list -v -keystore YOUR_KEYSTORE_FILE_PATH. WeChat needs the certificate fingerprint in MD5, remove : in the fingerprint. It should be string in length 32.

  • Fill in your package name

  • We will need to define a custom url for Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here is the example, you should update it with your own scheme.

    • "WECHAT_REDIRECT_URI_FOR_AUTHGEAR": com.myapp://host/open_wechat_app

  • Go to Authgear portal, do the following:

    • In the portal, go to Authentication > Social / Enterprise Login.

    • Enable Sign in with WeChat (Mobile/移动应用).

    • Fill in Client ID with the AppID.

    • Fill in Client Secret with the AppSecret.

    • Fill in 原始 ID with the 原始 ID.

    • Add WECHAT_REDIRECT_URI_FOR_AUTHGEAR above in WeChat redirect URIs.

    • Save the settings.

  • Update the code

    • Update application AndroidManifest.xml

        <!-- Your application configuration. Omitted here for brevity -->
        <application>
        <!-- Other activities or entries -->
      
        <!-- It should be added when setting up Authgear SDK -->
        <activity android:name="com.oursky.authgear.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" />
                <!-- This is the redirectURI, It should be added when setting up Authgear SDK -->
                <data android:scheme="com.myapp"
                    android:host="host"
                    android:pathPrefix="/path"/>
                <!-- Add this for WeChat setup, this should match the WECHAT_REDIRECT_URI_FOR_AUTHGEAR defined above -->
                <data android:scheme="com.myapp"
                    android:host="host"
                    android:pathPrefix="/open_wechat_app"/>
            </intent-filter>
        </activity>
      
        <!-- Add this for WeChat SDK setup, replace YOUR_PACKAGE_NAME-->
        <activity
            android:name=".wxapi.WXEntryActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:taskAffinity="YOUR_PACKAGE_NAME"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"></activity>
        </application>
    • Configure WeChat SDK

        private IWXAPI wechatAPI;
      
        private setupWechatSDK() {
            wechatAPI = WXAPIFactory.createWXAPI(app, YOUR_WECHAT_APP_ID, true);
            wechatAPI.registerApp(YOUR_WECHAT_APP_ID);
        }
    • Setup Authgear delegate

        mAuthgear.setDelegate(new AuthgearDelegate() {
            @Override
            public void sendWechatAuthRequest(String state) {
                if (!wechatAPI.isWXAppInstalled()) {
                    // User have not installed WeChat app, show them the error
                    return;
                }
                SendAuth.Req req = new SendAuth.Req();
                req.scope = "snsapi_userinfo";
                req.state = state;
                wechatAPI.sendReq(req);
            }
        });
    • Create wxapi directory in the directory named after your package name and create WXEntryActivity activity. In WXEntryActivity, pass the received intent and the object that implements IWXAPIEventHandler API to the handleIntent method of the IWXAPI API, as shown below:

        api.handleIntent(getIntent(), this);

      You will be able to receive the authentication code and state in onResp method, call Authgear wechatAuthCallback with code and state.

        mAuthgear.wechatAuthCallback(code, state, new OnWechatAuthCallbackListener() {
            @Override
            public void onWechatAuthCallback() {
            }
      
            @Override
            public void onWechatAuthCallbackFailed(Throwable throwable) {
            }
        });
    • Provide wechatRedirectURI when calling authorize and promoteAnonymousUser in Authgear SDK.

        // Replace "WECHAT_REDIRECT_URI_FOR_AUTHGEAR" with link defined above
        AuthenticateOptions options = new AuthenticateOptions(AUTHGEAR_REDIRECT_URI);
        options.setWechatRedirectURI(WECHAT_REDIRECT_URI_FOR_AUTHGEAR);
        mAuthgear.authenticate(options, new OnAuthenticateListener() {
            @Override
            public void onAuthenticated(@Nullable UserInfo userInfo) {
            }
      
            @Override
            public void onAuthenticationFailed(@NonNull Throwable throwable) {
            }
        });
      
        // For anonymous user support only
        // Replace "WECHAT_REDIRECT_URI_FOR_AUTHGEAR" with link defined above
        PromoteOptions options = new PromoteOptions(AUTHGEAR_REDIRECT_URI);
        options.setWechatRedirectURI(WECHAT_REDIRECT_URI_FOR_AUTHGEAR);
        mAuthgear.promoteAnonymousUser(options, new OnPromoteAnonymousUserListener() {
            @Override
            public void onPromoted(@NonNull UserInfo userInfo) {
            }
      
            @Override
            public void onPromotionFailed(@NonNull Throwable throwable) {
            }
        });
      
        // Open setting page
        // Replace "WECHAT_REDIRECT_URI_FOR_AUTHGEAR" with link defined above
        SettingOptions options = new SettingOptions();
        options.setWechatRedirectURI(WECHAT_REDIRECT_URI_FOR_AUTHGEAR);
        mAuthgear.open(Page.Settings, options);
  • Here is the completed example.

React Native

  • Setup Authgear SDK

  • Follow iOS接入指南 and Android接入指南 to setup WeChat SDK. For the coding part, we will further explain in the below steps.

  • In iOS, after setting up the WechatOpenSDK, universal link should be enabled in your application. We will need two links for the setup. One is for the WeChat SDK used, another is for the Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here are the suggestion of the links.

    • IOS_WECHAT_UNIVERSAL_LINK: https://{YOUR_DOMAIN}/wechat

    • IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR: https://{YOUR_DOMAIN}/open_wechat_app

  • In android, you need to sign your app to use WeChat SDK. Obtain your application signature by running command keytool -list -v -keystore YOUR_KEYSTORE_FILE_PATH with your keystore file. WeChat needs the certificate fingerprint in MD5, remove : in the fingerprint. It should be string in length 32.

  • Login WeChat Open platform, open the application detail page, update the development information iOS and Android sections.

  • In iOS

    • Fill in "Bundle ID" field with your app bundle id.

    • Fill in "Universal Links" with "IOS_WECHAT_UNIVERSAL_LINK" above.

  • In Android

    • Fill in application signature.

    • Fill in your package name

  • For android, we will need to define a custom url for Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here is the example, you should update it with your own scheme.

    • ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR: com.myapp://host/open_wechat_app

  • Login Authgear portal, go to "Single-Sign On" page, then do the following:

    • Enable "Sign in with WeChat (Mobile/移动应用)"

    • Fill in "Client ID" with the WeChat "AppID".

    • Fill in "Client Secret" with the WeChat "AppSecret".

    • Fill in "原始 ID" with the WeChat "原始 ID".

    • Add "IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR" and "ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR" above into "WeChat redirect URIs"

    • Click save.

  • Update the code

    • In Android, Update application AndroidManifest.xml.

        <!-- Your application configuration. Omitted here for brevity -->
        <application>
        <!-- Other activities or entries -->
      
        <!-- It should be added when setting up Authgear SDK -->
        <activity android:name="com.authgear.reactnative.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" />
                <!-- This is the redirectURI, It should be added when setting up Authgear SDK -->
                <data android:scheme="com.myapp"
                    android:host="host"
                    android:pathPrefix="/path"/>
                <!-- Add this for WeChat setup, this should match the WECHAT_REDIRECT_URI_FOR_AUTHGEAR defined above -->
                <data android:scheme="com.myapp"
                    android:host="host"
                    android:pathPrefix="/open_wechat_app"/>
            </intent-filter>
        </activity>
      
        <!-- Add this for WeChat SDK setup, replace YOUR_PACKAGE_NAME-->
        <activity
            android:name=".wxapi.WXEntryActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:taskAffinity="YOUR_PACKAGE_NAME"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"></activity>
        </application>
    • In iOS, update your App Delegate

        - (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray *))restorationHandler {
            [WXApi handleOpenUniversalLink:userActivity delegate:self];
            [AGAuthgearReactNative application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
            return YES;
        }
    • Provide wechatRedirectURI when calling Authgear SDK authorize and promoteAnonymousUser in js

        // REPLACE IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR and ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR
        const wechatRedirectURI = Platform.select<string>({
            android: 'ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR',
            ios: 'IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR',
        });
      
        authgear
            .authenticate({
                redirectURI: "REDIRECT_URI",
                wechatRedirectURI: wechatRedirectURI
      
            });
      
        // For anonymous user support only
        authgear
            .promoteAnonymousUser({
                redirectURI: "REDIRECT_URI",
                wechatRedirectURI: wechatRedirectURI
            });
      
        // Open setting page
        authgear
            .open(Page.Settings, {
                wechatRedirectURI: wechatRedirectURI,
            })
    • Setup Authgear delegate and open WeChat SDK when sendWechatAuthRequest is triggered

        authgear.delegate = {
            sendWechatAuthRequest: (state) => {
                // User click login with WeChat
                // Implement native modules to use WeChat SDK to open 
                // WeChat app for authorization.
                // After obtaining authorization code, call Authgear.wechatAuthCallback
                // to complete the authorization.
                const {WechatAuth} = NativeModules;
                WechatAuth.sendWechatAuthRequest(state)
                .then((result: {code: string; state: string}) => {
                    // Native module sending back the code after login with
                    // WeChat app. Call Authgear.wechatAuthCallback
                    return authgear.wechatAuthCallback(result.code, result.state);
                })
                .then(() => {
                    // Send WeChat callback to authgear successfully
                })
                .catch((err: Error) => {
                    // error ocurred
                });
            }
        }
    • Implement the NativeModules to use WeChat SDK to open WeChat app for authorization. Here is the completed example.

Flutter

  • Setup Authgear SDK

  • Follow iOS接入指南 and Android接入指南 to setup WeChat SDK. For the coding part, we will further explain in the below steps.

  • In iOS, after setting up the WechatOpenSDK, universal link should be enabled in your application. We will need two links for the setup. One is for the WeChat SDK used, another is for the Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here are the suggestion of the links.

    • IOS_WECHAT_UNIVERSAL_LINK: https://{YOUR_DOMAIN}/wechat

    • IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR: https://{YOUR_DOMAIN}/open_wechat_app

  • In android, you need to sign your app to use WeChat SDK. Obtain your application signature by running command keytool -list -v -keystore YOUR_KEYSTORE_FILE_PATH with your keystore file. WeChat needs the certificate fingerprint in MD5, remove : in the fingerprint. It should be string in length 32.

  • Login WeChat Open platform, open the application detail page, update the development information iOS and Android sections.

  • In iOS

    • Fill in "Bundle ID" field with your app bundle id.

    • Fill in "Universal Links" with "IOS_WECHAT_UNIVERSAL_LINK" above.

  • In Android

    • Fill in application signature.

    • Fill in your package name

  • For android, we will need to define a custom url for Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here is the example, you should update it with your own scheme.

    • ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR: com.myapp://host/open_wechat_app

  • Login Authgear portal, go to "Single-Sign On" page, then do the following:

    • Enable "Sign in with WeChat (Mobile/移动应用)"

    • Fill in "Client ID" with the WeChat "AppID".

    • Fill in "Client Secret" with the WeChat "AppSecret".

    • Fill in "原始 ID" with the WeChat "原始 ID".

    • Add "IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR" and "ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR" above into "WeChat redirect URIs"

    • Click save.

  • Update the code

    • In Android, Update application AndroidManifest.xml.

        <!-- Your application configuration. Omitted here for brevity -->
        <application>
        <!-- Other activities or entries -->
      
        <!-- It should be added when setting up Authgear SDK -->
        <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" />
                <!-- This is the redirectURI, It should be added when setting up Authgear SDK -->
                <data android:scheme="com.myapp"
                    android:host="host"
                    android:pathPrefix="/path"/>
                <!-- Add this for WeChat setup, this should match the WECHAT_REDIRECT_URI_FOR_AUTHGEAR defined above -->
                <data android:scheme="com.myapp"
                    android:host="host"
                    android:pathPrefix="/open_wechat_app"/>
            </intent-filter>
        </activity>
      
        <!-- Add this for WeChat SDK setup, replace YOUR_PACKAGE_NAME-->
        <activity
            android:name=".wxapi.WXEntryActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:taskAffinity="YOUR_PACKAGE_NAME"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"></activity>
        </application>
    • Provide wechatRedirectURI.

        // REPLACE IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR and ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR
        var wechatRedirectURI = "";
        if (Platform.isIOS) {
            wechatRedirectURI = 'IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR';
        } else if (Platform.isAndroid) {
            wechatRedirectURI = 'ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR';
        }
      
        await authgear.authenticate(redirectURI: "REDIRECT_URI", wechatRedirectURI: wechatRedirectURI);
      
        // For anonymous user support only
        await authgear.promoteAnonymousUser(redirectURI: "REDIRECT_URI", wechatRedirectURI: wechatRedirectURI);
      
        // Open setting page
        await authgear.open(SettingsPage.settings, wechatRedirectURI: wechatRedirectURI);
    • Provide sendWechatAuthRequest

      final authgear = Authgear(
          sendWechatAuthRequest: sendWechatAuthRequest,
      );
      
      Future<void> sendWechatAuthRequest(state: String) async {
          // Implement your platform specific code to use WeChat SDK to open WeChat app.
          // After success, pass the code back to Authgear.
          await authgear.wechatAuthCallback(state: state, code: code);
      }
    • Implement the platform specific code to use WeChat SDK to open WeChat app for authorization. Here is the completed example.

Enterprise Login Providers

Guides on how to integrate identity providers to Authgear

Connect Apps to Azure Active DirectoryConnect Apps to Microsoft AD FSConnect Apps to Azure AD B2C

Connect Apps to Azure Active Directory

Prerequisite

  1. Create an Azure Active Directory (Azure AD) account here

  2. Setup a tenant by completing Quickstart: Set up a tenant

  3. Register an application by completing Quickstart: Register an application with the Microsoft identity platform

  4. Choose "Supported account type", the following options are supported:

    • Accounts in this organizational directory only (Contoso AD (dev) only - Single tenant)

    • Accounts in this organizational directory (Any Azure AD directory - Multitenant)

    • Accounts in this organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)

    "Personal Microsoft accounts only" is not supported yet. Remember the account type chosen as this affects the configuration on Authgear portal

  5. Configure "Redirect URI" with https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/azureadv2

  6. Follow this section to add a client secret. Remember to record the secret value when you add the client secret, as it will not be displayed again. This will be needed for configure OAuth client in Authgear.

Redirect URI has the form of /sso/oauth2/callback/:alias. The alias is used as the identifier of OAuth provider. You can configure the alias in Authgear Portal.

Configure Sign in with Microsoft through the portal

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Sign in with Microsoft

  3. Fill in Client ID with Application (client) ID of your just created Azure AD application.

  4. Fill in Client Secret" with the secret you get after creating a client secret for your Azure AD application.

  5. For Tenant field:

    • If single tenant (first option) is chosen, fill in the Directory (tenant) ID of your Azure AD application.

    • If multi tenant (second option) is chosen, fill in the string literal organizations.

    • If multi tenant and personal account (third option) is chosen, fill in the string literal common.

  6. Save the settings.

🎉 Done! You have just added Azure Active Directory (Azure AD) Login to your apps!

Force Login page

Azure Active Directory automatically logs in to the same account without requiring a username and password. To prevent this behaviour, you can use the prompt=login parameter to force Azure Active Directory to show the login page. See our guide on using the prompt=login parameter in Authgear SDKs to learn more.

Connect Apps to Microsoft AD FS

Prerequisite

  1. Setup your own AD FS server

  2. Create an application in your AD FS Server, obtain "Client ID", "Client Secret" and "Discovery Document Endpoint". Discovery Document Endpoint typically ends with /.well-known/openid-configuration. Configure your application with redirect uri https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/adfs.

Redirect URI has the form of /sso/oauth2/callback/:alias. The alias is used as the identifier of OAuth provider. You can configure the alias in Authgear Portal.

Configure Sign in with Microsoft AD FS through the portal

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Sign in with Microsoft AD FS.

  3. Fill in Client ID, Client Secret and Discovery Document Endpoint.

  4. Save the settings.

🎉 Done! You have just added Microsoft AD FS Login to your apps!

Force Users to Re-authenticate

Microsoft AD FS supports the prompt=login parameter. You can include this parameter in your request when you want users to re-authenticate. See our guide on using the prompt=login parameter in Authgear SDKs to learn more.

Connect Apps to Azure AD B2C

Prerequisite

  1. Sign in Microsoft Azure.

  2. Create a B2C tenant by following this tutorial.

  3. Enable self-service sign-up for the tenant by following this doc

  4. Go back the main page of Microsoft Azure and search for "Azure AD B2C"

  5. Create a app registration for Authgear by following this guide.

  6. Configure "Redirect URI" with https://<YOUR_AUTHGEAR_ENDPOINT>/sso/oauth2/callback/azureadb2c.

  7. Follow this guide to create a sign-up and sign-in user flow.

  8. After creating the user flow, configure it

  • Open "Application Claims".

  • Make sure "Email Addresses" is checked.

Configure Sign in with Azure AD B2c through the portal

If you have finished the above prerequisite, you should have the following information:

  1. The Tenant Name, obtained in Step 2

  2. The Application (Client) ID, obtained in Step 5

  3. The Policy (User flow) Name, obtained in Step 7

Then in Authgear portal, do the following:

  1. In the portal, go to Authentication > Social / Enterprise Login.

  2. Enable Sign in with Microsoft Azure AD B2C.

  3. Fill in Client ID with the Application (Client) ID above.

  4. Fill in Client secret with the client secret you get when you create the app registration.

  5. Fill in Tenant with the Azure AD B2C Tenant Name.

  6. Fill in Policy with the Policy (User Flow) Name. Normally it starts with b2c_.

  7. Save the changes

🎉 Done! You have just added Azure AD B2C Login to your apps!

Force Login page

Azure AD B2C automatically logs in to the same account without requiring a username and password. To prevent this behaviour, you can use the prompt=login parameter to force Azure AD B2C to show the login page. See our guide on using the prompt=login parameter in Authgear SDKs to learn more.

Force Social/Enterprise Login Providers to Show Login Screen

Use OIDC prompt parameter to force OAuth providers to show login screen.

The prompt="login" parameter which is defined in the OIDC spec can prompt Social/Enterprise Login Providers to always show their login screen. As a result, you can use the prompt="login" parameter to allow users to switch accounts when their previous authentication session on the provider is still stored.

In this post, you'll learn how to use prompt: "login" in Authgear SDKs to force OIDC providers to always show your users their login screen. You can also use prompt: "login" to allow users to switch accounts with a Social/Enterprise Login provider on the same device (or browser).

How to Force Social/Enterprise Login Providers to Show Login Page

Authgear SDKs have a prompt parameter that you can set in your application. The value of the prompt parameter will be passed to the Social/Enterprise Login provider. Hence, if you set prompt: "login" in the SDK, your Social/Enterprise Login provider will receive a prompt="login" parameter. The following code examples show how to use the prompt parameter in Authgear SDKs.

authgear
  .startAuthentication({
    redirectURI: "<AUTHGEAR_REDIRECT_URI>",
    prompt: PromptOption.Login,
  })
authgear
  .authenticate({
    redirectURI: 'com.reactnativeauth://host/path',
    prompt: PromptOption.Login,
  })
AuthenticateOptions options = new AuthenticateOptions("<AUTHGEAR_REDIRECT_URI>");
List<PromptOption> promptOptions = Arrays.asList(PromptOption.LOGIN);
options.setPrompt(promptOptions);
mAuthgear.authenticate(options, new OnAuthenticateListener() {
    @Override
    public void onAuthenticated(@Nullable UserInfo userInfo) {
        
    }

    @Override
    public void onAuthenticationFailed(@NonNull Throwable throwable) {
        Log.d(TAG, throwable.toString());
    }
});
authgear?.authenticate(
    redirectURI: "<AUTHGEAR_REDIRECT_URI>",
    prompt: "login"
)
_authgear.authenticate(
        redirectURI: "<AUTHGEAR_REDIRECT_URI>",
        prompt: "login",
      );