Ionic 5/Capacitor 3 + Tailwind CSS + Auth0 + GraphQL + React + Typescript Real-World Mobile App Demo
A demo app for Ionic 5 and Capacitor 3 that shows how to build a real-world cross-platform app with authentication, graphql, and react. All make possible with only free community plugins.
Probably you are here because you cannot find an ionic/capacitor example that uses Tailwind CSS or anything with authentication. And yes, it's the same reason I build this demo app here. So, have fun!
- ⚡ Latest Ionic 5 + Capacitor 3
- 📰 Real-time data feed (dev.to) via GraphQL
- 🔑 Secure SSO/password authentication via Auth0
- 🎨 Styling with TailwindCSS
- 🔃 Live reload! Code changes are automatically reflected in the app!
- ⚛️
Not angular, it's React! - 🧞 Everything in TypeScript!
- 🥇 Single app for both iOS and Android
- Simply clone the repo and bootstrap the repository via
npm install
!
npm install
- Run the app on a simulator or real device
npm run ios
or
npm run android
- Open your code editor and start coding! All source files are in the
src
directory.
There are a few things you may want to change to customise your app.
First, you'll want to change the APP_ID
and AUTH0_CLIENT_ID
values in the src/environments/environment.ts
file.
Also, checkout capacitor.config.ts
and customise it to suit your needs.
For detail see https://capacitorjs.com/docs/config
Running a mobile emulator on your local machine can be painfully slow Orz... 😪 Well. There's a way to speed it up: Run it on the cloud, and even better, on a real device!!!
There are a couple of cloud emulators available. In my case, I use browserstack because it offers real-time testing on a real device. Alternatively, LambdaTest is also a good option with a cheaper price, though they only provide emulators, not real devices. But Google will help you find the best one for you.
I am sharing my setup here, so you can replicate the experience on your provider.
-
Setup a local tunnel to the provider. For example, using Browserstack Local or LambdaTest Tunnel.
-
Serve the web app from your local machine or even on the cloud.
For example, run
npm run start:web
for serving the app from your local machine. (Note:HOST
andPORT
are configurable inionic:serve
life cycle script). -
Set the serving URL that the app can reach via the tunnel in environment variable
LIVE_RELOAD_URL
and open the project to compile the app package: e.g.LIVE_RELOAD_URL=https://localhost.lambdatest.com:8100 npm run open:ios
if you follow the default setting for lambda test.Under the hood,
LIVE_RELOAD_URL
loaded incapacitor.config.ts
to generate the relevant live reload setting below:
{
"server": {
"url": "<LIVE_RELOAD_URL>",
"cleartext": true
}
}
-
Upload the build (a
.ipa
for iOS orapk
for android) to your provider. -
Run the app on a cloud device and have fun!
NOTE Currently, the app is only tested on iOS and Android.
There are some tutorials out there suggesting you manually put your external IP address to capacitor.config.ts
in order to use live reload.
While it's true that a configuration is need in order to connect to an external web server for loading the web app,
if you use my setup, this configuration is automatically loaded when you supply LIVE_RELOAD_URL
.
You don’t need to manually add it for development or remove it for a production build.
For more detail, check out the guide at Auth0
- Configure Callback URLs A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated.
The callback URL for your app must be whitelisted in the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error. YOUR_PACKAGE_ID:https://YOUR_DOMAIN/cordova/YOUR_PACKAGE_ID/callback
- Configure Allowed Origins (CORS) Add file as an allowed origin to the Allowed Origins (CORS) box.
file:https://*
If you're testing the app on a browser via npm run start:web
or the equivalent ionic serve
,
be aware that the setting for the Allowed Origins
and Callback URLs
may be different.
By default, it should be from https://localhost:8100
.
For being able to open the app from a custom scheme you need to register the scheme first.
Assuming your custom scheme is custom.scheme
so that the app will open any custom.scheme:https://<url>
link,
follow the instruction below for the two platforms.
Check out https://capacitorjs.com/docs/apis/app for more detail.
For iOS,
- In
ios/App/App/Info.plist
add something similar to the following:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>custom.scheme</string>
<key>CFBundleURLSchemes</key>
<array>
<string>custom.scheme</string>
</array>
</dict>
</array>
IMPORTANT Change custom.scheme
to your custom scheme.
For Android,
- In
android/app/src/main/AndroidManifest.xml
, inside the activity section, add the following:
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/custom_url_scheme" />
</intent-filter>
-
Then in
android/app/src/main/res/values/strings.xml
, change the value ofcustom_url_scheme
to your custom scheme. -
Finally in
android/app/src/main/res/xml/config.xml
, add the following at root so that only one instance of your app will be ever be launched and therefore after authentication the callback will always be delivered to the right app.
<preference name="AndroidLaunchMode" value="singleTask" />
Deep links allow you to send someone a link that will be opened in the app they have installed on their phone. For setting it up, follow the official guide here https://capacitorjs.com/docs/guides/deep-links
-
How to run the app on a device?
Open xcode or android studio with the command below and select the device target before start running.
npm run open ios
or
npm run open android
- Special thanks to OneGraph https://www.onegraph.com for providing the demo data. They are one service connecting to many others such as stripe, GitHub, Twitter etc. all in one. Check them out.
- nextjs-tailwind-ionic-capacitor-starter: A similar demo with TailwindCSS, but achieved via Next.js and JS only.
Copyright © 2021, Alvis Tang. Released under the MIT License.