DEV Community

Cover image for Flutter Firebase Authentication: Apple Sign In

Flutter Firebase Authentication: Apple Sign In

offlineprogrammer profile image Offline Programmer Updated on ・5 min read

As per Apple guidelines, apps that are offering sign in with other social services also need to provide the option of apple sign-in. I think it is very convenient to offer (Apple Sign In) on iOS as you would offer Google Sign In on Android, as your iOS users already have an Apple ID and can use it to sign in with your App.

In this post, we are going to add Apple Sign In to our Flutter & Firebase app. We will use the sign_in_with_apple Flutter package available on


Xcode installed
An Apple Developer Account
An iOS 13.x device or simulator, signed in with an Apple ID
Firebase Project for the App

Firebase Setup

We need to add iOS App to the Firebase project. Note the bundle id; we will use it later.

Screen Shot 2021-02-16 at 4.19.52 PM

Download the GoogleService-Info.plist file

Screen Shot 2021-02-16 at 4.30.08 PM

Enable Apple authentication

Screen Shot 2021-02-16 at 9.09.05 PM

Apple Setup

Open the Identifiers page on the Apple developer website here and click the (+) icon.

Screen Shot 2021-02-16 at 8.40.34 PM

Select App IDs and click Continue.

Screen Shot 2021-02-16 at 8.43.02 PM

The type is App. click Continue.

Screen Shot 2021-02-16 at 8.46.05 PM

Set the bundle Id similar to what we used in the firebase project. Check on the (Sign In with Apple) capability, then select Continue.

Screen Shot 2021-02-16 at 8.52.22 PM

Click Register to complete Apple configuration.

Screen Shot 2021-02-16 at 8.56.20 PM

Project Setup

Let's start by creating an App using the command below using Terminal.

flutter create flutter_apple_signin

Enter fullscreen mode Exit fullscreen mode

Update pubspec.yaml as below to add the required packages

    sdk: flutter
  firebase_core: "^0.7.0"
  firebase_auth: "^0.20.0+1"
  sign_in_with_apple: ^2.5.2
  crypto: ^2.1.5
  provider: ^4.3.3

Enter fullscreen mode Exit fullscreen mode

Right-click on the ios folder and select Open in Xcode.

Screen Shot 2021-02-16 at 3.38.44 PM

On the Signing & Capabilities tab, configure the signing by setting the Team as per your Apple developer account. Make sure to use the same bundle Id we used in the firebase project.

Screen Shot 2021-02-16 at 3.47.46 PM

Add "Sign In With Apple" as a new Capability:

Screen Shot 2021-02-16 at 3.46.05 PM

Set the Deployment target to iOS 13

Screen Shot 2021-02-16 at 8.07.57 PM

Right-click on the Runner Project and select Add Files to "Runner"

Screen Shot 2021-02-16 at 4.34.22 PM

Select the GoogleService-Info.plist filer we downloaded from Firebase and select Add.

Screen Shot 2021-02-16 at 4.36.56 PM

App Implementation

Create the authentication_provider.dart file below in the (lib\providers) folder. We will use it to sign in with Apple.

import 'dart:convert';
import 'dart:math';

import 'package:crypto/crypto.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';

class AuthenticationProvider with ChangeNotifier {
  final FirebaseAuth _firebaseAuth;


  Stream<User> get authStateChanges => _firebaseAuth.authStateChanges();

  Future<void> signOut() async {
    await _firebaseAuth.signOut();

  /// Generates a cryptographically secure random nonce, to be included in a
  /// credential request.
  String generateNonce([int length = 32]) {
    final charset =
    final random =;
    return List.generate(length, (_) => charset[random.nextInt(charset.length)])

  /// Returns the sha256 hash of [input] in hex notation.
  String sha256ofString(String input) {
    final bytes = utf8.encode(input);
    final digest = sha256.convert(bytes);
    return digest.toString();

  Future<User> signInWithApple() async {
    // To prevent replay attacks with the credential returned from Apple, we
    // include a nonce in the credential request. When signing in in with
    // Firebase, the nonce in the id token returned by Apple, is expected to
    // match the sha256 hash of `rawNonce`.
    final rawNonce = generateNonce();
    final nonce = sha256ofString(rawNonce);

    try {
      // Request credential for the currently signed in Apple account.
      final appleCredential = await SignInWithApple.getAppleIDCredential(
        scopes: [
        nonce: nonce,


      // Create an `OAuthCredential` from the credential returned by Apple.
      final oauthCredential = OAuthProvider("").credential(
        idToken: appleCredential.identityToken,
        rawNonce: rawNonce,

      // Sign in the user with Firebase. If the nonce we generated earlier does
      // not match the nonce in `appleCredential.identityToken`, sign in will fail.
      final authResult =
          await _firebaseAuth.signInWithCredential(oauthCredential);

      final displayName =
          '${appleCredential.givenName} ${appleCredential.familyName}';
      final userEmail = '${}';

      final firebaseUser = authResult.user;
      await firebaseUser.updateProfile(displayName: displayName);
      await firebaseUser.updateEmail(userEmail);

      return firebaseUser;
    } catch (exception) {

Enter fullscreen mode Exit fullscreen mode

Create the login_screen.dart file below in the (lib\screens) folder. This will display the Apple SignIn button, which will use the method (signInWithApple) from the AuthenticationProvider.

import 'package:flutter/material.dart';
import 'package:flutter_apple_signin/providers/authentication_provider.dart';
import 'package:provider/provider.dart';

import 'package:sign_in_with_apple/sign_in_with_apple.dart';

class LoginPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
              onPressed: () {

Enter fullscreen mode Exit fullscreen mode

On main.dart, we will watch the Firebase User object to determine the login or logout page.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter_apple_signin/providers/authentication_provider.dart';
import 'package:flutter_apple_signin/screens/login_screen.dart';
import 'package:flutter_apple_signin/screens/logout_screen.dart';
import 'package:provider/provider.dart';

Future<void> main() async {
  await Firebase.initializeApp();

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
          create: (ctx) => AuthenticationProvider(FirebaseAuth.instance),
          create: (BuildContext context) {
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.purple,
          accentColor: Colors.deepOrange,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        home: MyHomePage(),
        routes: {},

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    final firebaseUser =<User>();
    return Scaffold(
        appBar: AppBar(
          title: Text('Apple Sign In'),
        body: firebaseUser != null ? LogoutPage() : LoginPage());

Enter fullscreen mode Exit fullscreen mode

The implementation is complete. Let's run the App.

Check the code here

Follow me on Twitter for more tips about #coding, #learning, #technology, #Java, #JavaScript...etc.

Check my Apps on Google Play

Cover image Aditya Joshi on Unsplash

Discussion (6)

Editor guide
paramo profile image

Hello!! nice post!! Ive been doing the same but in the apple sign in screen after selected my email, full name and password a message appeared saying "login not completed" I tried to debug but no error show, its like it isnt making the validation. Any tips? im so stuck! Thank you! :)

offlineprogrammer profile image
Offline Programmer Author

Are you testing on simulator? if yes, then try using a simulator of iOS 13.5 or lower...

paramo profile image

Thank you for your reply! I am testing on a physical device. I made it work now, I was missing on developer console, under Certificates, Identifiers & Profiles -> Keys. Adding the apple sign in key. I just did it on xcode but apparently wasnt enough

Thank you again and your post is so helpfull!

Thread Thread
offlineprogrammer profile image
647338bacbbb426 profile image
Ankur Saini

What should I do for sign Up Page not sign IN?

offlineprogrammer profile image
Offline Programmer Author

You mean creating an Apple account? I don't think that is supported by Firebase.