How can I make authorization functionality using tokens? - flutter

Question

Can someone explain how to implement token authentication in Flutter? I don't understand how this process works. Can someone tell me step by step or even show with examples how this happens? I use Swagger to implement.
Request URL:
https://api.dev.certihire.com/api/v1/sessions
Response body:
{
"_v": "1.0",
"data": {
"user": {
"id": 606,
"firstName": null,
"lastName": null,
"email": "lysohor.rostyslav.cr#gmail.com",
"phoneNumber": null,
"role": "User"
},
"token": {
"accessToken": "eyJhb....ms",
"refreshToken": "eyJhb....AI",
"expireDate": "2022-06-07T12:26:18Z",
"type": "Bearer"
}
}
}
Response headers:
api-supported-versions: 1.0
connection: keep-alive
content-type: application/json; charset=utf-8
date: Tue, 24 May 2022 12:26:18 GMT
server: nginx/1.12.2
strict-transport-security: max-age=31536000
transfer-encoding: chunked
x-content-type-options: nosniff

Answer 1

The process is quite simple, really. When you get your response body, retrieve both tokens (access and refresh) and the user ID and store them safely (e.g. using flutter_secure_storage)
When you re-enter the app, check if the tokens exist (at least the refresh token) and if yes, you can use the user ID to automatically log in. If there is no token, or the server replies with it not being valid (with a status code most likely equaling 401, but it depends), you should redirect the user to the login page for manual re-authentication.
Every request to a protected route should be made with the access token. Usually, the access token has a purposely short expiration date, so that only 1-2 resources can be used using this token. You can then use your refresh token to regen a token pair and retry the original request.
If you use JWT, the information about the expiration date is built into the token, so there is no need to send it. Client side, you should build your requests with the authentication type in mind, in your case using Bearer <'token'>. The logic to verify signed tokens is usually server-side, and the client's concern should only be storing them safely.
As a final note, HTTP(s) requests in Flutter can be done using the http package.

Answer 2

Use shared preferences to store the refresh and access token when the user has logged in. After that whenever the app starts check if there is any access or refresh token stored inside the shared preferences. If present then move to the main screen of the application otherwise move to the login screen. Also, do check if the stored refresh token is valid or if it's session has expired. In case expired, do log out and clear the shared preferences so that next time when app starts it will not find any token inside the shared preferences and the user will see the login screen again. Same with any logout button provided for log out for the user.
For shared preferences you need to add shared_preferences package inside your pubspec.yaml file.