How to add apple-app-site-association file to your Wix website

We came across an interesting challenge for our iOS app and needed to enable password autofill for sign-in page, so the password would be save in the iCloud keychain and the next time you want to login in the app, you don’t need to re-enter the password. Also the password will be shared with your app website.

Password auto-fill

Implementing this feature is so simple and need a few steps. first you need to set the content type of each field sigup/signin fields:

// for username field
textContentType = UITextContentType.username

// for password field
textContentType = UITextContentType.password

Then you need you need to enable associated domains for your app in Xcode which I suggest to read apple official doc.

1- Enable Associated Domains in Xcode

Please follow apple official doc.

2- Add apple-app-site-association to your Wix website

Part of the process is to add an special json file named apple-app-site-association to the our website root directory. But the problem is Wix doesn’t allow you to access to the directory of your website to add or modify files. you just have access to a dashboard to edit your website. So then what to do? 🤔

The solution

We use Wix URL redirect feature and leveraging wix http functions. so when apple calls https://my-website.com/.well-known/apple-app-site-association we redirect the url to a special function and the function will return the content of the file.

1. Log in to your Wix account and open website editor from the left panel by navigating to: Site & App -> Website then select Edit Site :

Edit Site

2. Turn on Dev Mode:

Turn on Dev Mode

3. In the left panel, select Public & Backend section

4. Click on “+” button in Backend section and select New file

5. Name the file apple-app-site-association.json, add the content you need and save it.

6. Click the “+” button again, this time select the Expose site API option. This will generate http-functions.js file with an example function:

7. Copy and paste this function into http-functions.js:

import {ok, notFound} from 'wix-http-functions';

export function use_appleAppAssociation(request) {
    const appleAppAssociationContent = require('backend/apple-app-site-association.json');
    return ok({body: appleAppAssociationContent});
}

8. Run the function and save it if it works well

9. Go back to your Wix dashboard and navigate to Marketing & SEO -> SEO -> URL Redirect Manager

10. Click + New Redirect, enter/.well-known/apple-app-site-association as old URL and /_functions/appleAppAssociation as new URL. This will ensure that our function will be called every time someone fetches the apple-app-site-association file.

11. Tap View redirect to see if it’s working correctly. You should see the content of your apple-app-site-association file on the screen.

12. If you’re experiencing any issues, you can check website logs in Developer Tools -> Logs

Summary

I’ve noticed that many individuals have encountered the same issue as us, and although there were some available solutions, they were not easily understandable or straightforward to follow. I hope the answer and steps provided here can save you several hours of troubleshooting and allow you to enjoy your time more.

Special thanks to my brilliant teammate Dory Piacek for helping to debug and finalize the solution. 👏👏👏

Join the The Climate App 🌎 to have a positive impact on the environment.