Add Expo config plugin (SDK 41+)

[sdacunha]

Changes

Please describe both what is changing and why this is important. Include:

• Endpoints added, deleted, deprecated, or changed

N/A - none added or changed

• Classes and methods added, deleted, deprecated, or changed

N/A - No API level changes

• Screenshots of new or changed UI, if applicable

N/A - No UI changes

• A summary of usage if this is a new feature or change to a public API (this should also be added to relevant documentation once released)

While Expo supports Auth0 via AuthSession, this allows for native UIs to be built in Expo around this library while staying in the managed workflow (no custom native code!).

This change adds the support for using this library with the Expo Managed Workflow via a config plugin. This means the modifications to the Info.plist, build.gradle and AppDelegate.m are automatically performed by the plugin and allows users to generate a custom Expo dev client.

Work on this config plugin is based on @EvanBacon's config plugin work on expo-camera and react-native-mapbox-gl.

We use this internally via a forked version of this repo and our app seems to build in EAS and prebuilding locally gives correct results. I was able to call:

      auth0.webAuth
        .authorize({ scope: 'openid email profile' })
        .then((credentials) => console.log(credentials))
        .catch((error) => console.log(error));

successfully in my SDK43 client built via EAS Build.

This change should have no effect on non-Expo users, nor Expo users who do not use the plugin via their app.json.

NOTE: Readme modifications are already made, but can be put off until this is released. I left these in for context

References

Please include relevant links supporting this change such as a:

• support ticket
• community post
• StackOverflow post
• support forum thread

See: https://expo.canny.io/feature-requests/p/support-auth0 See: https://github.com/auth0/react-native-auth0/issues/222

Please note any links that are not publicly accessible.

Testing

Please describe how this can be tested by reviewers. Be specific about anything not tested and reasons why. If this library has unit and/or integration testing, tests should be added for new functionality and existing tests should complete without errors.

Tests for

• [x] This change adds unit test coverage
• [x] This change has been tested on the latest version of the platform/language or why not

Tests were added for custom merge logic (regex-based modifications similar to those made in react-native-mapbox-gl) in the plugin. A built version of the plugin was provided so upon publish, the plugin is available in a JS format that works with Expo 41+.

Much of the work and tests are based on existing Expo Custom plugins for other libraries written by the Expo team.

Additionally, one can create a new Expo SDK 41+ app, follow the README instructions and run expo prebuild to see changes added by this plugin to the native code (based on various config scenarios as described in the README.md)

Code coverage is failing, but unfortunately I'm not sure of a way to test the Expo plugin hooks. None of the other plugins I have come across run tests on those, and those seem to be the reason the coverage is failing.

Checklist

• [x] I have read the Auth0 general contribution guidelines
• [x] All existing and new tests complete without errors
• [ ] All active GitHub checks have passed

@EvanBacon would be great if you could review this as well!

[chandlervdw]

This is much appreciated.

[jgozner]

@sdacunha thanks for creating this but I just wanted to check something with you since I'm having issues with my EAS build.

cli version : 43.0.0

this is my app.json

    "plugins":[
      ["react-native-auth0", { "android" : { "domain": "sample.auth0.com", "scheme":"com.sample.app" }}],
      ["expo-notifications", { "icon": "./local/assets/android_notification_icon.png", "color": "#ffffff", "mode": "production"}]
    ],

[stderr] /root/workingdir/build/android/app/src/main/AndroidManifest.xml Error:
[stderr] 	Attribute data@host at AndroidManifest.xml requires a placeholder substitution but no value for <auth0Domain> is provided.
[stderr] /root/workingdir/build/android/app/src/main/AndroidManifest.xml Error:
[stderr] 	Attribute data@scheme at AndroidManifest.xml requires a placeholder substitution but no value for <auth0Scheme> is provided.

I even tried using the EAS environment build but no luck.

eas.json

    "preview": {
      "env": {
        "EXPO_AUTH0_DOMAIN": "sample.auth0.com",
        "EXPO_AUTH0_SCHEME": "com.sample.app"
      },

[sdacunha]

@EvanBacon thanks for reviewing this! Some good suggestions there, will get to this soon. @jgozner thanks for letting me know. Things have been busy for me but I will take a look with a sample app soon. If you can share a repo i can test in EAS, that would help me repro! if not, I'll try to spin up something when I can

[isaachinman]

@lbalmaceda @Widcket This has been open awhile, any chance there's bandwidth for support?

[teovillanueva]

Are there any news on this?

[onedanshow]

Would also love for Auth0 to have better managed Expo workflow support.

[EvanBacon]

As an aside, expo-auth-session (a pure JS library) should be fully capable of working with Auth0 in Expo and React Native apps across iOS, Android, and web.

However, this package should still pursue adding an Expo Config Plugin because it gives users more options!

[sdacunha]

As an aside, expo-auth-session (a pure JS library) should be fully capable of working with Auth0 in Expo and React Native apps across iOS, Android, and web.

However, this package should still pursue adding an Expo Config Plugin because it gives users more options!

I second this - we are currently using AuthSession for auth0 at this time (hence I haven't been able to prioritize work on this, but hopefully will get to this soon) and will continue to do so in the near-term since it serves our purposes right now. Likely going to be considering using this library for more control over the auth process and other auth0 specific offerings.

[poovamraj]

Hi, Apologies for the delay.

We will take a look into this PR, have a discussion with the team and get back to you on this.

[mitramejia]

Are there any updates on this? 🙏

[matthops]

Appreciate all the work being done on this pull request. Looking forward to its release!

[bombillazo]

Hello! An update on this PR would be great, and any help needed to expedite this.

[onedanshow]

Thank you for making progress on this branch @poovamraj

[poovamraj]

Hey All 👋 Sorry about the long wait but we are working on the long-awaited Expo support 🚀 We would love to hear your feedback on this PR as we are almost done with the work.

I want to give a huge shoutout to @sdacunha who has done tremendous work with this PR and @EvanBacon for reviewing this.

[onedanshow]

Thanks @poovamraj. Excited to see this solution.

My big hope here is getting out of edge cases when using expo-auth-session and Auth0. Like when signing into LinkedIn via Auth0 in an web browser opened by AuthSession, if the user has their credentials save in the browser and uses them, here's what happens:

• browser puts in LinkedIn creds into LinkedIn form and hits submit
• user doesn't notice loading progress bar at top and hits the LinkedIn sign in button, too
• Auth0 throws the "Oops there's something wrong" screen, with technical explanation of "invalid_request" "may have pressed back, refresh during login ..."

[stevenconner]

Hello everyone, thank you to @sdacunha for coming up with this, super super helpful in our app! Having an issue this morning trying to do new builds, when doing a yarn install from "sdacunha/react-native-auth0#expo-plugin" it's not building the plugin correctly, and throwing an error Error: Cannot find module './plugin/build/withAuth0' when trying to build with EAS and locally. ./plugin/src contains the withAuth0.ts file but the build folder doesn't exist there. Not sure if there's an issue with NPM or something right now, as it built fine yesterday and as far as i can tell there has been no changes to the code on @sdacunha 's github repo for this... anyone have any insight?

[sdacunha]

Hey @stevenconner

This change will mean you sadly will not be able to use it off the repo directly. From a quick glance of the changes so far, it seems like it will get built on publish. The approach of leaving the build folder in and not ignoring it was seen in a few repos I worked with so I had initially done that, but I believe some of them had not published a version to npm yet and it may have been a stop gap (such as rnmapbox).

@poovamraj we should likely confirm however that it does not get ignored from the final published package as including it in the .gitignore may do that, and end users will get the above error

I currently have a published version of my fork at @sdacunha/react-native-auth0 (via GitHub's NPM registry) that I am using for the time being for our projects internally. It works for us in our EAS builds. Once this is merged / published I will likely switch over to keep up with updates and some of the nicer API changes to the plugin. Until then you can feel free to use that if it will unblock you, or you can build the plugin locally and publish to a registry for your use

Thanks for following up on this @poovamraj - looking forward to seeing this merged in!

[stevenconner]

@sdacunha thank you so much for this, pointing to your fork now, got me unblocked!! 🙏

[poovamraj]

Hey @onedanshow, I just tested out the scenario you told and it seems to work for me. What do you think?

device-2022-08-24-203731.webm

[poovamraj]

~~@sdacunha Yes as you mentioned we wanted to build the plugin right before we publish and that is why we have added it to .gitignore. We will be running yarn prepare in our CI before npm publish. This change should be committed tomorrow after doing a dry run locally~~

Looks like running prepare is run as a part of publishing as mentioned here. So we should be good to go on that. I have tested this locally and confirmed as well

[sdacunha]

@sdacunha Yes as you mentioned we wanted to build the plugin right before we publish and that is why we have added it to .gitignore. We will be running yarn prepare in our CI before npm publish. This change should be committed tomorrow after doing a dry run locally

Sounds good - however, I think the build folder will be excluded from the final uploaded package since its now being excluded in .gitignore and there is no separate .npmignore here. Thats why most projects do not .gitignore the plugin build folder, since the package that gets uploaded will not include plugin/build with the current setup from my understanding.

[poovamraj]

@sdacunha you are exactly right, that's why we already added the .npmignore file here

[sdacunha]

@sdacunha you are exactly right, that's why we already added the .npmignore file here

Ah that's perfect - should be good to go then.

Thanks again for getting this closer in shape to merge in!

[poovamraj]

Hey all 👋 just wanted to give an update that the First Availability with Expo support is now available here