Using Teta CMS for authentication in Flutter

10/07/2022 - 3 min read

Hey! I'm Andrea from Teta 👋
Today we will a start a serie of short tutorials.
Let me know what you think about 🙂

What is Teta CMS

Teta CMS is a low-code back-end service. We provide:

  • Scalable NoSQL database
  • Real-time subscriptions
  • User authentication system and policies
  • Perform custom queries on your collections with our Ayaya language
  • Use an easy-to-use and responsive user interface

Add authentication in your Flutter app in 3 steps

In order to add an authentication system in your app, you need a back-end service to handle all the registration process. We will use today Teta CMS, our low-code back-end service made for everyone.

In this moment we are supporting the following providers:

1) Initialize Teta CMS

First at all, sign in on app.teta.so and create a new project.
In the dashboard of your project, you can find your credentials inside the section 'Getting Started'.
You can copy directly the code.

And paste it inside your main.dart method, at the beginning of your app before calling runApp.

2) Setup provider's credentials & Deeplink

Authentication with Teta CMS works by opening a browser to allow people to log in using different providers.
This method allows us to write much less code.

To open a browser and return to the application after successful login, you need to configure the deeplink in your application.

Set your redirect URL

  • Go to app.teta.so > Project dashboard > Users > Config
  • Fill the 'Redirect Url' field

(eg. com.example.app://welcome following the format 'SCHEME://HOSTNAME')

Android

Declare your Redirect Url inside the `ActivityManifest.xml` file.
In this example we are using the value `com.example.app://welcome`

Android docs: https://developer.android.com/training/app-links/deep-linking

iOS

Declare your Redirect Url inside the `ios/Runner/Info.plist` file.
In this example we are using the value `com.example.app://welcome`

Apple docs: https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app

Web

Nothing needs to be set up for the Web.

Windows, macOS, Linux

Authentication for desktop platforms is coming soon.

Fill your credentials

Before you can use the Teta CMS auth, you must configure the credentials of the providers you want to use in your app.

To enter the credentials go to:

  • project dashboard > users > config

3) Call .signIn() method

All you have to do now is to call the '.signIn()' method, choosing the right provider for you.
For example, the code:

The 'isFirstTime' flag tells us whether the user is a first-time login, which is useful if we only need to perform actions for the first time.

Get the logged user

Final thoughts

Teta CMS allows anyone to seamlessly add a backend solution to an application.
Authentication is an essential feature in applications, and with the new Teta CMS service, you can easily add it in no time.

Access now >