Flutter: Discord Authorization

In today’s digital world, communication is key to any successful project. And, when it comes to communication, Discord has become one of the most popular platforms used by teams to communicate and collaborate. Integrating Discord with Flutter is a great way to streamline communication and make collaboration more efficient.

In this blog, we’ll explore how to integrate Discord with Flutter using the package flutter_web_autho_2.

Picnic App

Picnic, makes it easy to dive directly into feeds centered around your interests, toggle between those interest feeds, and find exactly what you’re in the mood for. Share fun short videos, pictures, and messages with others in your interest groups! No matter what you love (from writing to scuba diving to fashion), Picnic has a home for you.

As part of this development process, we need to integrate Discord into Picnic to help users communicate and coordinate with each other across the two apps!

The first step in integrating Discord with Flutter is to create an app on Discord’s Developer Portal. Once you have created an app, you’ll need to copy your app’s client ID and secret. This information will be used to authenticate and authorize your app’s access to Discord.

Next, you’ll need to install the flutter_web_autho_2 package. This package provides a set of tools for handling authentication and authorization with various platforms, including Discord.

Here’s an example of how to use the flutter_web_autho_2 package to authenticate and authorize access to Discord, in the Picnic App :

import 'package:flutter_web_auth_2/flutter_web_auth_2.dart';
import 'dart:convert' show jsonDecode;
import 'package:http/http.dart' as http;

// App specific variables
final discordClientId = 'XXXXXXXXXXXX'; // replace with your Discord client ID
final discordClientSecret = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; // replace with your Discord client secret
final redirectUri = 'https://example.com/callback'; // replace with your app's redirect URI

// Construct the URL
final url = Uri.https('discord.com', '/api/oauth2/authorize', {
  'response_type': 'code',
  'client_id': discordClientId,
  'scope': 'identify',
  'redirect_uri': redirectUri,
});

// Present the dialog to the user
final result = await FlutterWebAuth2.authenticate(url: url.toString(), callbackUrlScheme: redirectUri);

// Extract code from resulting URL
final code = Uri.parse(result).queryParameters['code'];

// Construct an Uri to Discord's oauth2 endpoint
final tokenUrl = Uri.https('discord.com', '/api/oauth2/token');

// Use this code to get an access token
final response = await http.post(tokenUrl, body: {
  'client_id': discordClientId,
  'client_secret': discordClientSecret,
  'grant_type': 'authorization_code',
  'code': code,
  'redirect_uri': redirectUri,
});

// Get the access token from the response
final accessToken = jsonDecode(response.body)['access_token'] as String;

The accessToken, then needs to be passed to another service in order to authenticate the user, using a Bearer Token.

Thank you for taking the time to read this article. I hope you enjoyed it.