Precursor:

Your app must have a login

Features

A logout button offers the following features:

  1. App users can log out of the app

Get Started

To set up a logout button you’ll need to:

  1. Create a new screen
  2. Add a button to your screen
  3. Add custom HTML
  4. Add custom JavaScript
  5. Test the logout button

Step 1 – Create a new screen

    1. Click on the blue “Add screens” button.

    1. Select “Basic” from the options and then click on the “Basic screen -centered content” screen.

    1. Click on the blue “Add 1 new screen” button in the top right.

    1. Enter the screen name “Logout” and then click the blue “Add screen” button.

Step 2 – Add a button to your screen

    1. In the Add components menu on the right, scroll down until you see the “Buttons”.

    1. Drag and drop the blue “primary button” over your screen. Your screen should now look like this:

    1. Under Button label on the right, change the label to “Logout”. The Link action should be “None”.

    1. Click on the blue “Save & Close” button.

Step 3 – Add custom HTML

    1. On the side bar on the right, click “Developer Options”. It looks like this: .

    1. In the HTML tab, find the line of code that mentions the button.

See the example below:

    1. Place your cursor at the beginning of the line of code that includes the word “button” and press enter to create a new blank line above it.

    1. In the new blank line (2), paste the code as shown in the image below.
      Then at the end of the line of code that includes the word “button”, paste the additional code also shown in the image below. The HTML code should now look like this:

    1. Click on the blue “Save & Run” button.

Step 4 – Add custom JavaScript

    1. Go to the area for your screen’s JavaScript.

    1. Paste the following code:
      $(‘.logout’).on(‘click’, function () { Fliplet.Session.logout().then(function onSessionDestroyed() { Fliplet.Navigate.screen(68533) }); });
      It should look like this:

You will need to change the number that appears in the code you just copied.

    1. In the screens menu on the left in Fliplet studio, find where your “Login” screen is located, hover over it, and click on the “settings” icon that appears.

    1. Here you will see the screen ID. Double click on that number and copy it.

    1. Paste the number in place of the current number that appears in the JavaScript code you copied and pasted earlier.

    1. Click on the blue “Save & Run” button.

Step 5 – Test the logout button

    1. Go to “Preview” Mode.
    2. Click on the “Enable security” button on the right.

    1. Log in to your app.
    2. Next, click on the “Logout” screen from the list of screens on the left.

    1. Click on the “Logout” button.

  1. The app will log you out and redirect you to the login screen ready for the next log in.