Login with native functions

Turn your website into an app in 60 seconds!
Preview My App
Jack & Jones' desktop website and mobile app.

Canvas allows you to display a login screen when the app is opened, requiring users to log in before they can access the app content.

In order to dismiss the login screen after a successful login, you can use the “login” native function.

By calling the nativeFunctions.login() function the app will immediately dismiss the login screen and reload the app, updating all the content for the user who is now logged in.

Here is an example of how to use the login native function:

<script type="text/javascript">
	// Add the event listener
	window.addEventListener("message", (event) => {
		isAppReady = event;
	}, false);

	// Log the user in
	function loginApp(isAppReady) {
		try {
			// Check if the native functions are ready to be used
			if (isAppReady.data && isAppReady.data == 'nativeFunctionsLoaded') {
				nativeFunctions.login();
			}

		} catch (ex) {
			console.log(ex.message);
		}
	}
</script>
			
<button onClick="loginApp(isAppReady)">Log me in</button>

Keep in mind that dismissing the login screen and updating the content is all that the app does in this case, cookies and sessions should still be managed by your website.

You will also want to trigger the “logout” event when a page is loaded and the user is logged out, so the app can display the login screen again.

Launch your brand's mobile app with a team of experts by your side.

Our team holds your hand through every step of the process to make building an app a no-brainer.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
  • Preview your app yourself or get a live demo on a call.
  • Learn about our platform and process to help you launch with minimal work required.
  • Risk free - 100% app approval guaranteed or your money back.
Only and Bestseller's iOS and Android apps.
Thank you! We'll be in touch within 48 hours :)
Oops! Something went wrong while submitting the form.
Chat icon.