Login and Profile Tutorial

This tutorial steps you through creating a Thunkable app with basic login and profile capabilities. You’ll begin with a template, tweak a few things, and within minutes have an app with basic capabilities. You can then customize it and add your own screens and behavior.

Make a copy of the login-only template

  • If you don’t have one, signup for a free account at Thunkable.com.
  • Open the template app on your computer.
  • Try the template app: register and log in. You’ll need a real email that you can verify to register.
  • From the template app detail page, click on “See Inside” to view/remix the code
  • Make a copy of the app. Your copy will not work immediately. You need to tweak it by creating your own firebase account and project for login, your own cloudinary account for saving files, and your own Google sheet. You’ll also need to tweak some blocks so that your Google sheet is used instead of the original. All the tools you need are free and you can complete the work in 20 minutes following the instructions below.

Connect to Firebase for reg/login

  • If you don’t have one, sign up for a free account at Firebase.com
  • Create a new project, you’ll be prompted for a name.
  • Disable the Google Analytics for the time being.
  • Firebase provisioning will take a few seconds, just wait.
  • Connect your firebase project to your app
    — provide Firebase with a nickname for your app (can be same as project name)
    — do not choose “hosting” option
    — click “register app”
    — continue to console.
  • Set up user authentication
    — click “Authentication” and “get started”
    — In “sign-in method” tab, enable “Email/password” but not “email link”

Connect your app to Cloudinary to store profile images

  • Register for a free account at cloudinary.com. That site will store the images your users post.
  • On your dashboard at cloudinary, you’ll see three settings that need to be input into your Thunkable app.
  • At Thunkable, choose your project settings in the left panel and scroll down to find the Cloudinary settings. Copy the information from your cloudinary dashboard into these settings

Create your spreadsheet to store profile info

  • Create a Google sheet with a single row with the following column headings. Your column names must be exact. Name your sheet UserProfiles
  • At Thunkable, select the “AllUserScreen” and the Data Viewer Component on it. In the properties panel, change the “data source” to point at the sheet you just created, and set the properties as shown below:
  • Click on the “Blocks” tab, then visit the Login, Registration, and Profile screens. For all blocks that refer to the original spreadsheet, change the data source to point at the new one you just created. Be careful– you want all of the column settings and other blocks to remain unchanged, and when you change the source, they get modified.
Choose your sheet instead of UserProfileDD and set the display settings as shown above.

Modify LoginScreen Blocks

Choose your sheet instead of UserProfileDD and keep “username” selected.
Choose your sheet in all five rows above instead of UserProfileDD, and keep column choices as in above.

Modify RegScreen Blocks

Choose your sheet instead of UserProfileDD and replug blocks as in above.

Modify ProfileScreen Blocks

Choose your sheet instead of UserProfileDD, keep “description’ as column and parameter blocks as in the above.
Choose your sheet instead of UserProfileDD, keep “pic” as column and parameter blocks as in above.

Test the App and Troubleshooting

Test the app within Thunkable by choosing the “web preview” arrow in the top-right. Try to register. If things work, you (the test user) should receive an email to verify. Once you do that, you should be able to login.

If you don’t receive a verification email and can’t login, go to your Firebase console and see if a new user has been added. If not, check the Firebase settings in your Thunkable app.

You should also have a corresponding row in your Google sheet recording the email and user name. If that isn’t there, check the data source settings and that all the blocks in the app refer to your new data source and have the proper column settings as shown in the images above.

Once you can register/login, test the user profile screen. If you have trouble setting an image for the profile, check your Cloudinary settings within Thunkable.