Flutter signup/login application with Django backend #1

Amartya Gaur
Apr 16, 2020 · 5 min read

Introduction

This series of posts intends to develop a flutter signup/login app working with API calls to Django backend. The idea is to use the DRF to create APIs which can be called by the flutter application. Most of the tutorials I have seen only talk about doing it with Firebase. Since I already will be using PostgreSQL for the Django, I intend on using that as my server DB and using SQLite with the Flutter Application to store just the Auth token and Username.

Django Rest Framework

I assume people reading this post already know about it but still just an introduction:

Flutter

Google Flutter is just awesome when it comes to cross-platform app development. The fact that it doesn’t convert your code to machine compatible but instead is capable of directly rendering it on the machine is the best.

BloC design pattern

I intend to use BloC (Business Logic Component) which was announced by Google in GOOGLE I/O’ 18. BloC is simply a state management pattern that works on sinks and streams. The widgets monitor the state changes and send them to the BloC using sinks and other widgets monitor those by subscribing to those streams where they expect the relevant data to arrive. The required sections are rebuilt per the state change. Thus Bloc stands in between data and UI and asynchronously maps events to states which rebuild the UI when required.

Let us Start

We will start by creating a new Django project to provide the required APIs for Login and Signup.
Go to your desired folder and activate your virtual environment. (You can refer here for the same)

Step 1

Create the project by:

django-admin startproject HOME

Note that I named my project as HOME, you can name it anything just be consistent in all the places where we use the names in the commands/code that follows.

cd into the project directory and create an app called api by:

python manage.py startapp api

I plan on using the auth system that Django provides by default. The User model has almost all the required fields that we may need for the Login and Signup. In case you need extra fields like phone number, address, etc. you can always define a new profile model that will have a one to one relationship with the User model. But for the sake of simplicity here, we are going to go with the User model itself. We have the fields first_name, last_name, username, email and password which we can use to create a new user.

Step 2

Install DRF by:

pip install djangorestframework

also, add it to your installed apps

INSTALLED_APPS = [
...
'rest_framework',
]

There are many auth systems available but I am going to go with Token Auth. We need to add that too in our installed apps:

INSTALLED_APPS = [
...
'rest_framework',
'rest_framework.authtoken',
]

We also need to add the following in our settings for us to be able to use the token auth:

REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework.authentication.TokenAuthentication',
),
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.IsAuthenticated',
],
}

Migrate your changes by:

Run this command from HOME/

python manage.py migrate

Step 3

Now that we are all set up and we have the default User model ready for us, we need to start creating our API

Create a file named serializers.py in HOME/api/ and the following code to it:

from django.contrib.auth.models import User
from rest_framework import serializers
from rest_framework.validators import UniqueTogetherValidator


class UserSerializer(serializers.ModelSerializer):

def create(self, validated_data):
user = User.objects.create_user(**validated_data)
return user

class Meta:
model = User
fields = (
'username',
'first_name',
'last_name',
'email',
'password',
)
validators = [
UniqueTogetherValidator(
queryset=User.objects.all(),
fields=['username', 'email']
)
]

What we did here is we created a serializer in order to map JSON to our model and vice-versa. The unique together validator will allow us to verify that the combination of username and email is unique for any particular user.

edit your HOME/api/views.py and add the following code to it:

from .serializers import UserSerializer
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from rest_framework.permissions import IsAdminUser
from django.contrib.auth.models import User


class UserRecordView(APIView):
"""
API View to create or get a list of all the registered
users. GET request returns the registered users whereas
a POST request allows to create a new user.
"""
permission_classes = [IsAdminUser]

def get(self, format=None):
users = User.objects.all()
serializer = UserSerializer(users, many=True)
return Response(serializer.data)

def post(self, request):
serializer = UserSerializer(data=request.data)
if serializer.is_valid(raise_exception=ValueError):
serializer.create(validated_data=request.data)
return Response(
serializer.data,
status=status.HTTP_201_CREATED
)
return Response(
{
"error": True,
"error_msg": serializer.error_messages,
},
status=status.HTTP_400_BAD_REQUEST
)

What we are doing here is creating a get and a post method, the get method allows us to get a list of all the registered users with our application and the post method allows us to create a new user with the required info as specified in our serializer.
Also, I added IsAdminUser as the permission class, the reason is that we do not want anyone to spam our server by sending multiple POST requests and creating unnecessary accounts.

Last but not least we will add routes for access to the application. let us create the file HOME/api/urls.py and add the following code to it:

from django.urls import path
from .views import UserRecordView

app_name = 'api'
urlpatterns = [
path('user/', UserRecordView.as_view(), name='users'),
]

We need to include the route for this and the token system in our main urls i.e. edit the file HOME/urls.py and add the following code to it:

from django.contrib import admin
from django.urls import path, include
from rest_framework.authtoken import views

urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls', namespace='api')),
path('api-token-auth/', views.obtain_auth_token, name='api-token-auth'),
]

We would need to create an admin user by:

python manage.py createsuperuser

Now enter the details asked and use them below.

Accessing our API

Thus, we have successfully created the required endpoint for the API.
We can now test it by the following:
I suggest you use POSTMAN which will make it easier for you.

Get authentication token

Endpoint: http://localhost:8000/api-token-auth/

{
"username": "admin",
"password": "password"
}

Get / Post user

GET

{
"Authorization": "TOKEN <token>"
}
{
"username": "<username>",
"first_name": "<first_name>",
"last_name": "<last_name>",
"email": "<email>",
"password": "<encrypted string>"
}

POST

{ "Authorization" : "TOKEN <token>" }

{
"username": "<username>",
"first_name": "<first_name>",
"last_name": "<last_name>",
"email": "<email>",
"password": "<encrypted string>"
}
{
"username": "<username>",
"first_name": "<first_name>",
"last_name": "<last_name>",
"email": "<email>",
"password": "<encrypted string>"
}

I will continue the project and write posts for each part. The end result will be a flutter app working with this API and SQLite DB.

Originally published at https://dev.to on April 16, 2020.

The Startup

Get smarter at building your thing. Join The Startup’s +789K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Amartya Gaur

Written by

Amartya Gaur I am a machine learning enthusiast and an experienced Django developer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Amartya Gaur

Written by

Amartya Gaur I am a machine learning enthusiast and an experienced Django developer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store