{"id":28972772,"url":"https://github.com/alvis/bareapp","last_synced_at":"2026-04-08T16:02:06.762Z","repository":{"id":105244912,"uuid":"280256065","full_name":"alvis/bareapp","owner":"alvis","description":"[WIP] The most up-to-date Ionic 5 + Capacitor 3 sample app with Auth0 for authentication, GraphQL, TailwindCSS, React and Typescript!","archived":false,"fork":false,"pushed_at":"2021-10-27T06:22:49.000Z","size":1058,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T11:08:40.473Z","etag":null,"topics":["auth0","capacitor","demo-app","graphql","graphql-application","ionic","ionic-framework","ionic5","ionic5-demo","ionic5-example","ionic5-starter","mobile-app","mobile-apps","mobile-development","react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alvis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-07-16T20:53:29.000Z","updated_at":"2024-01-26T22:07:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"57d60146-6de0-4bb1-b2f7-ba527a840e25","html_url":"https://github.com/alvis/bareapp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alvis/bareapp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvis%2Fbareapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvis%2Fbareapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvis%2Fbareapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvis%2Fbareapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alvis","download_url":"https://codeload.github.com/alvis/bareapp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvis%2Fbareapp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth0","capacitor","demo-app","graphql","graphql-application","ionic","ionic-framework","ionic5","ionic5-demo","ionic5-example","ionic5-starter","mobile-app","mobile-apps","mobile-development","react","tailwindcss","typescript"],"created_at":"2025-06-24T11:08:34.510Z","updated_at":"2026-04-08T16:02:06.757Z","avatar_url":"https://github.com/alvis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic 5/Capacitor 3 + Tailwind CSS + Auth0 + GraphQL + React + Typescript Real-World Mobile App Demo\n\nA demo app for [Ionic 5](https://ionicframework.com) and [Capacitor 3](https://capacitorjs.com) that shows how to build a real-world cross-platform app with authentication, graphql, and react. All make possible with only free community plugins.\n\nProbably 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!\n\n## Features\n\n- ⚡ Latest Ionic 5 + Capacitor 3\n- 📰 Real-time data feed (dev.to) via GraphQL\n- 🔑 Secure SSO/password authentication via Auth0\n- 🎨 Styling with TailwindCSS\n- 🔃 Live reload! Code changes are automatically reflected in the app!\n- ⚛️ ~Not angular~, it's React!\n- 🧞 Everything in TypeScript!\n- 🥇 Single app for both iOS and Android\n\n## Quick Start\n\n1. Simply clone the repo and bootstrap the repository via `npm install`!\n\n```shell\nnpm install\n```\n\n2. Run the app on a simulator or real device\n\n```shell\nnpm run ios\n```\n\nor\n\n```shell\nnpm run android\n```\n\n3. Open your code editor and start coding! All source files are in the `src` directory.\n\n## Configuring your app\n\nThere are a few things you may want to change to customise your app.\nFirst, you'll want to change the `APP_ID` and `AUTH0_CLIENT_ID` values in the `src/environments/environment.ts` file.\n\nAlso, checkout `capacitor.config.ts` and customise it to suit your needs.\nFor detail see https://capacitorjs.com/docs/config\n\n## Test your app like a PRO! ⚡⚡⚡\n\nRunning a mobile emulator on your local machine can be painfully slow Orz... 😪\nWell. There's a way to speed it up: Run it on the cloud, and even better, on a **real device**!!!\n\nThere are a couple of cloud emulators available.\nIn my case, I use [browserstack](https://www.browserstack.com) because it offers real-time testing on a real device.\nAlternatively, [LambdaTest](https://www.lambdatest.com) is also a good option with a cheaper price, though they only provide emulators, not real devices.\nBut Google will help you find the best one for you.\n\nI am sharing my setup here, so you can replicate the experience on your provider.\n\n1. Setup a local tunnel to the provider.\n   For example, using [Browserstack Local](https://www.browserstack.com/local-testing) or [LambdaTest Tunnel](https://www.lambdatest.com/support/docs/testing-locally-hosted-pages).\n\n2. Serve the web app from your local machine or even on the cloud.\n\n   For example, run `npm run start:web` for serving the app from your local machine. (Note: `HOST` and `PORT` are configurable in `ionic:serve` life cycle script).\n\n3. 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=http://localhost.lambdatest.com:8100 npm run open:ios` if you follow the default setting for lambda test.\n\n   Under the hood, `LIVE_RELOAD_URL` loaded in `capacitor.config.ts` to generate the relevant **live reload** setting below:\n\n```json\n{\n  \"server\": {\n    \"url\": \"\u003cLIVE_RELOAD_URL\u003e\",\n    \"cleartext\": true\n  }\n}\n```\n\n4. Upload the build (a `.ipa` for iOS or `apk` for android) to your provider.\n\n5. Run the app on a cloud device and have fun!\n\n**NOTE** Currently, the app is only tested on iOS and Android.\n\n## Development Notes\n\n### Live Reload\n\nThere are some tutorials out there suggesting you manually put your external IP address to `capacitor.config.ts` in order to use live reload.\n\nWhile it's true that a configuration is need in order to connect to an external web server for loading the web app,\nif you use my setup, this configuration is automatically loaded when you supply `LIVE_RELOAD_URL`.\n\nYou don’t need to manually add it for development or remove it for a production build.\n\n### Authentication\n\n#### Auth0 Configuration\n\nFor more detail, [check out the guide](https://auth0.com/docs/quickstart/native/ionic4) at Auth0\n\n1. Configure Callback URLs\n   A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated.\n\nThe 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.\nYOUR_PACKAGE_ID://YOUR_DOMAIN/cordova/YOUR_PACKAGE_ID/callback\n\n2. Configure Allowed Origins (CORS)\n   Add file as an allowed origin to the Allowed Origins (CORS) box.\n\n`file://*`\n\nIf you're testing the app on a browser via `npm run start:web` or the equivalent `ionic serve`,\nbe aware that the setting for the `Allowed Origins` and `Callback URLs` may be different.\nBy default, it should be from `http://localhost:8100`.\n\n#### App Configuration\n\nFor being able to open the app from a custom scheme you need to register the scheme first.\nAssuming your custom scheme is `custom.scheme` so that the app will open any `custom.scheme://\u003curl\u003e` link,\nfollow the instruction below for the two platforms.\n\nCheck out [https://capacitorjs.com/docs/apis/app](https://capacitorjs.com/docs/apis/app) for more detail.\n\nFor iOS,\n\n1. In `ios/App/App/Info.plist` add something similar to the following:\n\n```xml\n\u003ckey\u003eCFBundleURLTypes\u003c/key\u003e\n\u003carray\u003e\n  \u003cdict\u003e\n    \u003ckey\u003eCFBundleURLName\u003c/key\u003e\n    \u003cstring\u003ecustom.scheme\u003c/string\u003e\n    \u003ckey\u003eCFBundleURLSchemes\u003c/key\u003e\n    \u003carray\u003e\n      \u003cstring\u003ecustom.scheme\u003c/string\u003e\n    \u003c/array\u003e\n  \u003c/dict\u003e\n\u003c/array\u003e\n```\n\n**IMPORTANT** Change `custom.scheme` to your custom scheme.\n\nFor Android,\n\n1. In `android/app/src/main/AndroidManifest.xml`, inside the activity section, add the following:\n\n```xml\n\u003cintent-filter\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003ccategory android:name=\"android.intent.category.DEFAULT\" /\u003e\n    \u003ccategory android:name=\"android.intent.category.BROWSABLE\" /\u003e\n    \u003cdata android:scheme=\"@string/custom_url_scheme\" /\u003e\n\u003c/intent-filter\u003e\n```\n\n2. Then in `android/app/src/main/res/values/strings.xml`, change the value of `custom_url_scheme` to your custom scheme.\n\n3. 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.\n\n```xml\n\u003cpreference name=\"AndroidLaunchMode\" value=\"singleTask\" /\u003e\n```\n\n### Deep Links\n\nDeep 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\n\n## FAQ\n\n1. How to run the app on a device?\n\n   Open xcode or android studio with the command below and select the device target before start running.\n\n```shell\nnpm run open ios\n```\n\nor\n\n```shell\nnpm run open android\n```\n\n## Credits\n\n1. Special thanks to OneGraph [https://www.onegraph.com](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.\n\n### Other Cool Demos \u0026 Starters\n\n- [nextjs-tailwind-ionic-capacitor-starter](https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter): A similar demo with TailwindCSS, but achieved via Next.js and JS only.\n\n### License\n\nCopyright © 2021, [Alvis Tang](https://github.com/alvis). Released under the [MIT License](LICENSE).\n\n[![license](https://img.shields.io/github/license/alvis/bareapp.svg?style=flat-square)](https://github.com/alvis/bareapp/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvis%2Fbareapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falvis%2Fbareapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvis%2Fbareapp/lists"}