If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

With Auth0 you can painlessly integrate your Appery.io app with many services or platforms. For example, you can add the ability to connect with Facebook, Twitter, LinkedIn and many other social networks by using the Auth0 plug-in. In this tutorial you’ll learn how to authenticate with Facebook and post a message to a wall. You’ll also learn how to use a session token that was returned by Facebook to the user’s Appery.io database services.

Before you begin

  1. Tutorial level: intermediate.
  2. Prerequisites:
    • An Appery.io account.
    • A registered Facebook developer account with a registered application (if you don’t have one, you’ll need to create it before you begin).
    • A registered Auth0 account.

Create an Auth0 app

When you’ve just created your Auth0 account, you’ll see a prompt to enter your domain name. Enter any domain name you want, and click “Save”:

Select Facebook as an authentication provider and click “Save”:

Now you are redirected to a default app quick start page. Let’s create an Auth0 app: choose a Single Page App from the apps list and click “Select”:SelectApplicationType

After selecting the application type, choose “jQuery” to be used in the Front End:SelectPlatform

Next, when you are offered to select the Backend platform, click “NO, SKIP THIS”:SelectAPI

Under the Settings tab you can make changes you need. For example, change the default app name to Appery.io App and click “SAVE CHANGES”:Change Name

Next, under the Connections tab, make sure the needed services are turned on:

Create an Appery.io app

1. Open Appery.io and click “Create new app”, enter any app name, and click “Create”.

Once the mobile editor loads, you’ll see a start page:StartPage

2. On the left-hand side, click Pages > startScreenan editor with an empty startScreen will open:StartScreen

Import the Auth0 plug-in

1. To import the plug-in, click CREATE NEW > From Plug-in:

2. Check the box for the “Auth0 Identity Management” plug-in. Click “Import selected plug-ins”:AuthOIdentityManagementPlugin

Once the Auth0 plug-in is successfully installed, you will be asked to choose a start page and enter API keys. Select the check box and choose Auth0_Home as the start page:

Now, go to the Quick Start tab. Copy the code between src="/ and /":

Then paste it into App settings > External resources > User-defined resources in the Builder and add http:// before it. Click “Add”:added_resource

Then switch to Auth0 app settings and copy the Client Id. Paste it in the client_id field of Auth0_Settings in the Appery.io builder:Auth0AppSettings

Then copy the Domain from the Auth0 app settings and paste it to Auth0_Settings domain of the Builder.

And, finally, provide an App Callbacks URL that looks like:

If you’re using libraries version below 3.0, the URL will look as following:

Change APPERY-IO-APP-ID to your Appery.io App ID. You can find it in the current URL, between view/ and /app:

Enter the resulting URL to the redirect_uri of Auth0_settings. Also, enter it in Auth0 app settings in the Allowed Callbacks URLs field.

To make it work from mobile, add the following string to Allowed Callbacks URLs in Auth0 app Settings:

Don’t forget to change your_domain_name on your actual domain name. Here is how the callbacks look on the Auth0 web site:

Click “SAVE CHANGES” to save the Auth0 app settings. This is how your Auth0_Settings should look in the Builder:

That’s all you need to configure the Auth0 and Appery.io apps.

Testing the app

Now you can test the app by clicking the “Test” button in the top-right corner of the screen. Click “Launch” under Show without frame. You’ll see the “Login” button:

Click “Login” and you’ll see the popup window with the available services to authenticate:

Email and Password credentials are not the same as for your Auth0 account. These credentials are for the users that were created in Dashboard > Users at the Auth0 website. If you didn’t create any users in the Users tab, use the proposed social networks to authenticate.

Once the user is successfully authenticated, the Auth0_User page will be opened and information about the logged user will be displayed:

Auth0 services

The Auth0 plugin has two pages – Auth0_Home and Auth0_User.

Auth0_Home is an application start page, where clicking on the “Login” button opens the authenticate dialog. Once the user successfully authenticates, the Auth0_User page opens. The Auth0_API service triggers as the Auth0_User page opens. This service returns information about the logged user and displays it on the page.

Here is the Auth0_API Before Send event mapping:Aut0UserBSMapping

As you can see, the access_token and id_token are stored in the associated local storage variables. They were created in the Auth0_Help JavaScript.

Success event mapping looks like the following:Aut0UserSuccessMapping

Add the Facebook post service

Now, when you have your app working with Auth0, you can use APIs of every identity provider supported by Auth0.

Let’s post a message to a user’s Facebook wall using the Facebook Graph API:

1. First you need to add a new variable: Project > Model and Storage and open the Storage tab. Enter facebook_access_token and click “Add”:facebook_access_token

2. Open the Auth0_User page and switch to the DATA tab.

3. Click “Mapping” for Success event of auth0_user service and create the following mapping (access_token to facebook_access_token) and save:access_token_to_facebook_token

facebook_access_token will be used further for Graph API calls.

5. From Projects view: CREATE NEW > Service > REST, enter name Facebook_PostService, and click “Create Service.” The service will be listed under the Services folder.

6. Open the Settings tab of this service, and define the following string for the URL field:

7. Change Method to POST and Request Content Type to x-www-form-urlencoded:

8. Go to the Request tab, and, under Query String tab, add two parameters – access_token and message. Fill the message parameter with any value:RequestQueryString

9. Open the Auth0_User page and switch to the DATA tab. Select Service for the datasource and Facebook_PostService for the service. Click “Add”. Rename the service to facebook_post:facebook_post

10. Click “Mapping” for the Facebook_PostService Before Send event and create the following mapping:Facebook_PostServiceBSMapping

Mind, that the box Storage should be checked.

The service is ready. Now it’s time to add the invoke button:

1. Switch to the DESIGN tab. Add a Button component to the Auth0_User page and change its Text property to Post to Facebook:
Post to Facebook

2. Select this button, open the EVENTS tab, and add the following event: mobilebutton_4 > Click > Invoke Service > facebook_post. Save:FacebookPostEvent

3. One more thing to do – add publish permissions. Go to the Auth0 site and open Connections > Social. Click on Facebook and check “publish_stream”. Click “Save”:PublishStream

Testing the app

Now you can test the app again. Once the user is logged in with Facebook, the Auth0_User page will appear. By clicking “Post to Facebook”, the message will be posted on the user’s Facebook wall. Here is how the final app looks:

Using rules to get access to Appery.io database

With Auth0, you can use any identity provider to log in the user. After a successful authentication, a session token will be returned, and it can be used to manage an Appery.io database. That means that a user should log in just once to any identity provider, without the need to log in the Appery.io database directly. To implement this feature, Auth0 provides a Rules notion.

To access this, go to your Auth0 account and select “Rules. Click+ “CREATE YOUR FIRST RULE”:

Choose “empty rule”:

Give a name for this rule. You can choose any name you want. Go to the Github page of the Appery.io session token rule and copy all the code provided there. Paste it in the code area for new rule at the Auth0 site and click “Save”:

In line 5, you should provide your Appery database ID instead of <APPERY_DATABASE_ID>.

Read how to find your Appery.io database ID here.

Also, at the line 6 change A REALLY LONG PASSWORD to any ten symbols value. For example – 7758809130:

Click “SAVE” to store the changes. Rule will be automatically turned on so there is nothing more to do more on the Auth0 side.

Now, let’s slightly modify the app UI. Switch to the Appery.io builder, open the Auth0_User page and add two components:

1. Place the Button component on the page and change its Text property to Get Database Records:

2. Add the List component to the page and reduce its Items count to 1:

Appery.io UI components are described here.

Let’s say there is a database todoDB with a simple todo collection:

Note that the Secure collection option under Security and permissions tab is turned on, so any actions with this collection should be used with adding a token:

Import the appropriate database list service. From project view: CREATE NEW > Database Services. Select the todo database and list service for the todo collection:ImportDBServices

Click “Import selected services.” Once the service is imported, open the Auth0_User page and switch to the DATA tab. Select Service for the datasource and todoDB_todo_list_service for the service. Click “Add”:

Rename the service to todoDB_list_service:ServicesList

Click Before Send event “Mapping” for the todoDB_list_service. Create the following mapping and save:

Remember to check the Storage box.

Now the session_token value that was retrieved after logging in will be used as the X-Appery-Session-Token. Switch to the Success mapping and make the following mapping:SuccessMapping

Switch to the DESIGN tab and select the  “Get Database Records” button. Add the following event:

mobilebutton_5 > Click > Invoke service > todoDB_list_service.

Here is how the event should look:ToDoBDServiceAdded

Testing the app

Just like previously after a successful authentication, the user will navigate to the Auth0_User page. After clicking on “Get Database Records” the todoDB_list_service will trigger, and the todo collection entities will be retrieved and displayed as a list: