AppStax Social Login Guide

Learn how to use social networks to authenticate your users

Introduction

With AppStax Social Login your users can use their existing Facebook or Google accounts to sign up for your app, instead of creating a new username and password.

There are three steps you need to go through to enable social login for an AppStax app:

  • Register as a developer on each social network you want to use
  • Connect to the social networks in the AppStax Admin UI
  • Add a few lines of to the client code of your app

Each step is described in detail below, so let's get started!

Enabling Facebook Login

Register as developer at facebook.com

First, follow Facebook's own guide to create a Facebook App ID. Take note of your Facebook App ID and App Secret, as you will need those when configuring the AppStax Admin UI later. You don't need to download the Facebook SDK.

Add these settings in the Facebook Developer Admin:

  • In Settings » Advanced, enable Client OAuth Login and Web OAuth Login, and add https://appstax.com/api/latest/sessions/auth to Valid OAuth redirect URIs.

If you are creating a web app:

  • App Domains needs to include <yourdomain>.appstax.io (replace <yourdomain> with your chosen hosting subdomain). If you have configured a custom domain with AppStax, add that too.
  • Click + Add platform, chose Web and set fill in your Site URL.

If you are creating an iOS app:

  • Click + Add platform, choose iOS and add your Bundle ID from XCode.

If you are using Android:

  • Click +Add platform, choose Android and add your package name from Android Studio.

Set up Facebook in the AppStax Admin UI

Log in to the AppStax Admin UI and open Settings » Security for your app. Fill in your App ID and App Secret from the setup above and click save.

Enabling Google Sign-In

Register as developer at Google

Start by following Google's guide to create a client ID, choosing the following options:

  • Select Web application when asked for application type.
  • In Authorized redirect URIs, fill in https://appstax.com/api/latest/sessions/auth

If you are creating a web app:

  • Authorized redirect URIs needs to include the url of the web page the auth request is coming from. So if you host your web app on http://myapp.appstax.io/ you should add that url to the list.

Set up Google in Admin UI

Log in to the AppStax Admin UI and open Settings » Security for your app. Fill in your Client ID and Client Secret from the setup above and click save.

Add social login code to your JavaScript app

Social login triggers a popup that present the identity provider's own login dialog. To avoid popup blockers the login popup needs to be called from a click event handler or something else that is a direct result from user interaction.

How you create your login buttons will depend on the sort of JavaScript UI framework you use, but a plain HTML/JavaScript solution may look like this:

<button onclick="loginWithFacebook()">Log in with Facebook</button>
<button onclick="loginWithGoogle()">Log in with Google</button>
function loginWithFacebook() {
    appstax.login({provider: "facebook"})
           .then(function(user) {
               // The user is logged in with a Facebook account
           })
           .fail(function(error) {
               // Something went wrong. The user may have declined 
               // access for your app or closed the popup window.
           });    
}

function loginWithGoogle() {
    appstax.login({provider: "google"})
           .then(function(user) {
               // The user is logged in with a Google account
           })
           .fail(function(error) {
               // Something went wrong. The user may have declined 
               // access for your app or closed the popup window.
           });    
}

Add social login code to your iOS app

Using the standard signup/login screens

The quickest way to add social login to your iOS app is to use requireLogin:

[AXUser requireLogin:^(AXLoginConfig *config) {
    config.providers = @[@"facebook", @"google"];
} completion:^(AXUser *user) {
    // user is logged in
}];

This will pop up a modal login view with "Log in with Facebook" and "Log in with Google" buttons enabled in the UI. Remove any provider you don't want to use.

Using your own signup/login flow

If you are creating your own UI for signup, just add this code to run the social login dialog:

// Add this to your "Log in with Facebook" action
[AXUser loginWithProvider:@"facebook" completion:^(AXUser *user, NSError *error) {
    if(error == nil) {
        // The user is logged in with a Facebook account
    } else {
        // Something went wrong. The user may have declined access for your app.
    }
}];

// Add this to your "Log in with Google" action
[AXUser loginWithProvider:@"google" completion:^(AXUser *user, NSError *error) {
    if(error == nil) {
        // The user is logged in with a Google account
    } else {
        // Something went wrong. The user may have declined access for your app.
    }
}];

Add social login code to your Android app

To trigger the Social Login dialog, create buttons for each provider and add this code to the onClickListener. The only difference between the social networks is the "facebook" and "google" arguments:

// For Facebook Login:
ax.loginWithProvider("facebook", activity, new Callback<AxUser>() {
    public void onSuccess(AxUser output) {
        // The user is logged in with a Facebook account
    }
    public void onError(Exception e) {
        // Something went wrong. The user may have declined access for your app.
    }
});

// For Google Login:
ax.loginWithProvider("google", activity, new Callback<AxUser>() {
    public void onSuccess(AxUser output) {
        // The user is logged in with a Google account
    }
    public void onError(Exception e) {
        // Something went wrong. The user may have declined access for your app.
    }
});