A beautiful auth template starter app built with React Native, Expo and Appwrite.
Check out the blog here: How I built an auth template powered by react native
Appwrite is an open-source backend server that helps you build modern apps faster. It is a secure end-to-end backend server that is specially designed for frontend and mobile developers. It is a self-hosted solution that provides developers with a set of easy-to-use APIs to build any kind of project.
Learn more about Appwrite here.
If you are new to Github and haven't heard how to use this template, I recommend refer to getting-started guide on how to use this template.
Once you have the project setup, let's setup Appwrite Project and configure the app.
Create an account on Appwrite if you don't have already.
If you don't have and org setup, create a new organization.
Once thats done, create a new project. Give it a name and a custom project Id.
Add a new ios and android platform to the project. You can find the bundle identifier in the app.json
file.
To Setup OAuth providers, go to the Auth => Settings
tab in the Appwrite dashboard and add the providers you want to use. Refer to their individual docs on how to setup the OAuth providers.
This projects uses a cloud function that redirects back to your app when you click the password reset login you receive in your email. To setup the cloud function, I recommend using Deploy from Git
option in Functions
tab in the Appwrite dashboard.
To learn more about how to deploy a function from git, refer to the Function docs.
Else you can also use appwrite CLI to deploy the function.
Once you have setup the cloud function, add the following environment variable to the function.
APP_SCHEME=your_app_scheme
For example,
APP_SCHEME=rnauth
[!IMPORTANT] For security reasons, it is recommended to add the
APP_SCHEME
in the function environment variable. This scheme is needed to redirect back to the app. You can find the scheme in theapp.json
file. Without this it won't redirect back to your app
Domains
tab and copy the url of the function.That's it for the Appwrite setup. Now let's configure the app.
Copy the .env.example
file to .env
and fill in the details.
cp .env.example .env
Fill in the Appwrite details in the .env
file.
EXPO_PUBLIC_API_URL=your_appwrite_api_url
EXPO_PUBLIC_PROJECT_ID=your_appwrite_project_id
EXPO_PUBLIC_PLATFORM=your_app_bundle_id
EXPO_PUBLIC_REDIRECT_URL=your_appwrite_redirect_url
You will find the Redirect URL in your cloud function under the
Domain
tab. Paste the URL in theEXPO_PUBLIC_REDIRECT_URL
field.
app.json
file.[!NOTE] Ensure the bundle identifier is the same as the one you added in the Appwrite project.
app.json
file.Install dependencies
npm install
Prebuild the app
npx expo prebuild
If you are development mode, ensure you type npm run ios
or npm run android
to start the app.
If the app is already installed, npm run start
should be fine for you
Contributions are highly Welcomed 💙 . Feel free to open PRs for small issues such as typos. For large issues or features, please open an issue and wait for it to be assigned to you.
Join Appwrite community of developers and contributors to get help, share your projects and contribute to the platform.
This project is open source and available under the MIT License.