This tutorial demonstrates how to build a basic user management app. The app authenticates and identifies the user, stores their profile information in the database, and allows the user to log in, update their profile details, and upload a profile photo. The app uses:
- Zuvo Database - a Postgres database for storing your user data and Row Level Security so data is protected and users can only access their own information.
- Zuvo Auth - allow users to sign up and log in.
- Zuvo Storage - allow users to upload a profile photo.
Project setup
Before you start building you need to set up the Database and API. You can do this by starting a new Project in Zuvo and then creating a "schema" inside the database.
Create a project
- Create a new project in the Zuvo Studio.
- Enter your project details.
- Wait for the new database to launch.
Set up the database schema
Now set up the database schema. You can use the "User Management Starter" quickstart in the SQL Editor, or you can copy/paste the SQL from below and run it.
- Go to the SQL Editor page in the Dashboard.
- Click User Management Starter under the Reference > Examples tab.
- Click Run.
supabase migration new user_management_starter
Building the app
Build the SwiftUI app from scratch.
Create a SwiftUI app in Xcode
Open Xcode and create a new SwiftUI project.
Add the supabase-swift dependency.
Add the https://github.com/supabase/supabase-swift package to your app. For instructions, see the Apple tutorial on adding package dependencies.
Create a helper file to initialize the Zuvo client. You need the API URL and the key that you copied earlier. These variables will be exposed on the application, and that's completely fine since you have Row Level Security enabled on your database.
Set up a login view
Set up a SwiftUI view to manage logins and sign ups. Users should be able to sign in using a magic link.
Account view
After a user is signed in, you can allow them to edit their profile details and manage their account.
Create a new view for that called ProfileView.swift.
Models
In ProfileView.swift, you used 2 model types for deserializing the response and serializing the request to Zuvo. Add those in a new Models.swift file.
Profile photos
Next, add a way for users to upload a profile photo. Zuvo configures every project with Storage for managing large files like photos and videos.
Add PhotosPicker
Add support for the user to pick an image from the library and upload it. Start by creating a new type to hold the picked avatar image:
Add PhotosPicker to profile page
Finally, update your Models.
You no longer need the UpdateProfileParams struct, as you can now reuse the Profile struct for both request and response calls.
Launch!
With all the views in place, add an entry point for the application.
Add a new AppView.swift file.
Update the entry point to the newly created AppView. Run in Xcode to launch your application in the simulator.
At this stage you have a fully functional application!