Even though Canvas relies on your website for all the design and content, in some cases you will want to have the app set up in a slightly different manner.

In a social network app, for example, users will usually be required to log in before they can access the app content.

Below you can see a diagram of what this user flow would look like in the app:

As you can see, the login page is displayed as soon as the app is opened, before any piece of content, and only after we check if the login was successful, does the content gets displayed.

The login check, performed once the user submits a username and password is key to ensuring a smooth login process, and it can be handled in a few different ways:

WordPress

When using WordPress, our Canvas Plugin will handle most part of the login process for you.

In order to enable the login functionality for your app, go into your Canvas Dashboard, and follow these steps:

1. Enable the login
2. For the "Login page URL" use the https://yourwebsite/canvas-api/login or another login page of your preference
3. Set the login to be displayed when the app starts

You will have something like this:

Now under "Advanced":

1. Change the value of Remote_Server_Available to true
2. Change the value of Remote_Server_Root_URL to https://yourwebsite.com/canvas-api/loginstate

That's it, the app will now display the login screen on start and identify a logged-in user accordingly.

If you are having issues with users not remaining logged in to the app, please check this guide.

Checking the redirect URL

After a successful login, you can redirect the user to a unique URL, one that will be specific to the successful login event.

In most cases, the URL to which the user will be redirected after a successful login will look like this: https://yourwebsite.com/home?login_successful=true

With this redirect in place, we can make sure that the app is capable of recognizing the successful login, dismissing the login screen, and taking the user to the content.

We perform this check using the "Login Redirect" method:

Then using the "Login Complete Regular Expression" field to determine the URL that will confirm that the user has been successfully logged in. If we are using https://yourwebsite.com/home?login_successful=true for example, this is how the regular expression could look like:

You can use a tool like Regex Tester to test your Regex and see if it matches a specific URL.

Triggering native functions

In some cases, a redirect is not optimal, when you have a one-page application for example.

The alternative, in this case, would be to use the Native Functions.

Once you have determined that the user login was successful, calling the nativeFunctions.login() will have the same effect as the redirect, dismissing the login screen and displaying the content to the user.

What about the user logout?

Similarly, whenever a user gets logout you will want to tell the app to display the login screen over the content, so the user gets prompted to log in again in order to continue accessing the content.

The logout works similarly to the login, meaning that you can either use a redirect or trigger the nativeFunctions.logout() to tell the app that the user has been successfully logged out.