DEV Community: Sunim

[Haystack] Async Pipeline Streaming over FastAPI

Sunim — Tue, 24 Dec 2024 15:37:43 +0000

If you are Langchain lover &/ don't like to use the Haystack Experimental Features, this blog is not for you!

Need for this blog

Love the haystack team and ~~I hope they roll out a RC soon on hayhooks, for better intuitive/downstream experience~~ they have rolled out streaming response on hayhooks and run_async from v2.11.0. However, you can use this workaround_(ish)_ where we create pipeline task and set "sync" streaming callbacks on the running event loop to collect and yeild the chunks.

FAT shoutout to vblagoje for the gist 🙌🏽

Hand Holding

You can just copy the code and it should do the magic ie. streaming as Server-Sent Events.

Packages

Make sure to have these packages installed. Give uv or poetry a shot.

python = ">=3.10,<3.13"

fastapi = "^0.111.0"
uvicorn = "^0.30.1"

haystack-ai = "^2.11.0"
haystack-experimental = "^0.8.0"

pydantic = "^2.7.2"

FastAPI

This tutorial is not a guide for FastAPI, but just a skeleton to build some sort of generator to stream responses.

import os
import asyncio

from fastapi import FastAPI
from fastapi.responses import StreamingResponse

from pydantic import BaseModel
from typing import Dict, Any, AsyncGenerator

class ModalPipeline:
   def __init__(self, api_key: str):
      # something

   async def process_user_input(self, query: string) -> AsyncGenerator[str, None]:
      # something

class ChatQuery(BaseModel):
   """Chat query request model with user's input message."""
   query: str
   api_key: str

@app.post("/chat")
async def chat(chat_query: ChatQuery):
   pipeline = ModalPipeline(chat_query.api_key)

   return StreamingResponse(
       pipeline.process_user_input(chat_query.query),
       media_type="text/event-stream",
       headers={
           "Cache-Control": "no-cache",
           "Connection": "keep-alive",
           "Content-Type": "text/event-stream",
           "X-Accel-Buffering": "no",
       }
   )

if __name__ == "__main__":
   import uvicorn
   uvicorn.run(app, host="0.0.0.0", port=8000)

Pipeline

Next, we define the asynchronous pipeline. Here, given that I am passing the API_KEY through the the params, we add components to the pipeline dynamically.

# For >= v2.11.0
from haystack import AsyncPipeline
# For < v2.11.0
# from haystack_experimental.core import AsyncPipeline

from haystack.components.generators import OpenAIGenerator

template = """
Answer the question.
Question: {{question}}
Answer:
"""

class ModalPipeline:
   def __init__(self, api_key: str):
      self.api_key = api_key       
      self.generator = self.create_generator()

   def create_generator(self):
      return OpenAIGenerator(api_key=Secret.from_token(self.api_key), model="gpt-4o-mini")

   async def run_pipeline(self, pipeline: AsyncPipeline, input_data: Dict[str, Any]) -> AsyncGenerator[str, None]:
      # something

   async def process_user_input(self, query: string) -> AsyncGenerator[str, None]:
      rag_pipeline = AsyncPipeline()

      rag_pipeline.add_component("prompt_builder", PromptBuilder(template= template))
      rag_pipeline.add_component("generator", self.generator)

      rag_pipeline.connect("prompt_builder.prompt", "generator.prompt")

      input_data={
         "prompt_builder": {
             "query": query,
         },
         "generator": {}
      }

      async for chunk in self.run_pipeline(pipeline, input_data):
         yield chunk

The Hard Part

If you have just defined functions, you can just follow the gist.

If not, follow the code snippet below and I'll try to explain why we have implemented the way it is.

   async def run_pipeline(self, pipeline: AsyncPipeline, input_data: Dict[str, Any]) -> AsyncGenerator[str, None]:
      request_collector = ChunkCollector() # code snippet is right below
      loop = asyncio.get_running_loop()

      # Create sync wrapper for async callback
      async def async_callback(chunk):
          await collect_chunk(request_collector.queue, chunk) # code snippet is below

      def sync_callback(chunk):
          # Use run_coroutine_threadsafe instead of create_task
          future = asyncio.run_coroutine_threadsafe(async_callback(chunk), loop)
          try:
              # Wait for the coroutine to complete
              future.result()
          except Exception as e:
              print(f"Error in sync_callback: {str(e)}")

      # Set callbacks using sync wrapper
      input_data["generator"]["streaming_callback"] = sync_callback

      async def pipeline_runner():
          try:
              # For >= v2.11.0
              async for _ in pipeline.run_async_generator(data=input_data):
              # For < v2.11.0
              # async for _ in pipeline.run(input_data):
                  pass
          finally:
              await request_collector.queue.put(None)

      # Create task for pipeline
      pipeline_task = asyncio.create_task(pipeline_runner())

      try:
          # Start yielding chunks
          async for chunk in request_collector.generator():
              yield chunk
      finally:
          # Ensure pipeline task is cleaned up
          if not pipeline_task.done():
              pipeline_task.cancel()
              try:
                  await pipeline_task
              except asyncio.CancelledError:
                  pass

Some Q/A's for you

* Why dont we do a direct async callback without wrapping?

    async def callback(chunk):
        await collect_chunk(request_collector.queue, chunk)

    input_data["generator"]["streaming_callback"] = callback

The generator is calling the callback synchronously, but we're passing an async function. So, we need a sync wrapper around our async callback, instead of trying to await an async generator.

* Why dont we just create a task?

    def sync_callback(chunk):
        asyncio.create_task(async_callback(chunk))

The callback is being called from a different thread where there's no event loop. So, we need a thread-safe way to schedule the callback.

Chunking in SSE Format

We need to define the request_collector which handles the queue, stores the chunks and also yeilds the chunks from the queue(in SSE format).

from typing import AsyncGenerator

import uuid
import json

from asyncio import Queue

from haystack.dataclasses import StreamingChunk

class ChunkCollector:
    """Collects and queues streaming chunks."""
    def __init__(self):
        self.queue = Queue()

    async def generator(self) -> AsyncGenerator[str, None]:
        """Yields chunks from the queue."""
        # Send initial metadata event
        yield 'event: metadata\n' + f'data: {{"run_id": "{uuid.uuid4()}"}}\n\n'

        while True:
            chunk = await self.queue.get()
            if chunk is None:
                # Send end event
                yield 'event: end\n\n'
                break
            # Send data event
            yield f'event: data\ndata: {json.dumps(chunk)}\n\n'

async def collect_chunk(queue: Queue, chunk: StreamingChunk):
    """
    Collect chunks and store them in the queue.

    :param queue: Queue to store the chunks
    :param chunk: StreamingChunk to be collected
    """
    if chunk and chunk.content:
        await queue.put(chunk.content)

Frontend

You can directcly use EventSource or fetch. For this tutorial, let's use fetch-event-source:

import { fetchEventSource } from "@microsoft/fetch-event-source";

const abortController = new AbortController();

await fetchEventSource("/api/v1/multi-modal/stream", {
          signal: abortController.signal,
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
          onmessage(msg) {
            if (msg.event === "data") {
              const parsedData = JSON.parse(msg.data);
              console.log(parsedData);
            }
          },
          openWhenHidden: true,
          onclose() {
            // something
          },
          onerror(error) {
            console.error(error);
            throw error;
          },
        });

Final Notes

I completely agree with vblagoje here as sockets will be just 👌🏽. For more, do follow Support both callback and generator-based streaming in all Chat Generators

If you found this blog helpful, just send some good vibes my way ✌🏽!

Auto React-Native builds (CD) with Github-Actions and Fastlane

Sunim — Sun, 05 Apr 2020 12:47:48 +0000

Scenario

We were deploying to both the Play Store and App Store manually, which was taking a lot of time. We were going to move with Travis and Code-push, but then we stumbled on the article by BigCheeseApp and we just could not help by trying it out. Special thanks to JonnyBurger for writing about the tricks and cases 🙏

Github Actions

Github Actions is the workflow automation tool with CI/CD that allows you to do some tasks, such as running the test suite, deploying code and etc based on the Github Events and Types. When an event is triggered, your defined workflow will be run and help you to do some awesome jobs.

Fastlane

fastlane is the easiest way to automate beta deployments and releases for your iOS and Android apps. 🚀 It handles all tedious tasks, like generating screenshots, dealing with code signing, and releasing your application.

Setting up Github Actions

Make sure to have a git repository setup with remote pointing to GitHub.

Creating Workflow

First, we will have to create a workflow in .github/workflows directory. Similar to other CI/CD services, you may configure the workflow using YAML syntax. Multiple workflow files can be created in the directory and each workflow must have at least a Job.

Now, let’s create a publish.yml workflow and put a name for the workflow.

    name: Publish iOS and Android App to App Store and Play Store

Setting Trigger Event

We want to trigger the workflow when a Github Release is published. Thus, we will be using the release event in Github Actions to trigger our workflow. We want to trigger the workflow when the event is release and the activity type is published.

name: Publish React Native App to App Store and Play Store

on:
  release:
    type: [published]

Creating Jobs and Defining Steps

Each workflow must have at least a Job. Since we are building iOS and Android app, let’s add two jobs: release-ios and release-android in the workflow.

    name: Publish React Native App to App Store and Play Store

    on:
      release:
        type: [published]

    jobs:
      release-ios:
        name: Build and release iOS app
        runs-on: macOS-latest
        steps:
          - uses: actions/checkout@v1
          - uses: actions/setup-node@v1
            with:
              node-version: '10.x'
          - uses: actions/setup-ruby@v1
            with:
              ruby-version: '2.x'
          - name: Install Fastlane
            run: bundle install
          - name: Install packages
            run: yarn install

      release-android:
        name: Build and release Android app
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v1
          - uses: actions/setup-node@v1
            with:
              node-version: '10.x'
          - uses: actions/setup-ruby@v1
            with:
              ruby-version: '2.x'
          - name: Setup react-native kernel and increase watchers
            run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
          - name: Install Fastlane
            run: bundle install
          - name: Install packages
            run: yarn install

In the workflow above, we have added a few steps as follows:

actions/checkout@v1 – Checkout the current repository.
actions/setup-node@v1 – Install Node 10.x to run React Native >= 0.60
actions/setup-ruby@v1 – Install Ruby 2.x for the usage of Fastlane
Increasing the number of watchers - Increase the number of file watchers on the machine
bundle install – Install Fastlane
yarn install – Install NPM packages

Build and Publish Android app

There are 2 things that we need to build and publish an Android app:

keystore – Signing the APK. Learn more about how to create your keystore.
Google Credentials – Authenticate with Play Console for publishing the app. You can learn more about how to create your Google Credential or follow us:

Getting Google Credential Keys

Open the Google Play Console
Click the Settings menu entry, followed by API access and Click the CREATE SERVICE ACCOUNT
Follow the Google Developers Console link in the dialog, which opens a new tab/window:
1. Click the CREATE SERVICE ACCOUNT button at the top of the Google Developers Console
2. Provide a Service account name
3. Click Select a role and choose Service Accounts > Service Account User
4. Click the Create Key button
5. Make sure JSON is selected as the Key type
6. Click Create and press Done
Back on the Google Play Console, click DONE to close the dialog
Click on Grant Access for the newly added service account
Choose Release Manager from the Role dropdown and Click ADD USER to close the dialog

Encrypt the Google Credential Key

Now, rename the json file to google-private-key.json , add it into .gitignore and save it inside /android/app . So, we need to encrypt the key and keystore :

    gpg --symmetric --cipher-algo AES256 android/app/your-secret.json
    gpg --symmetric --cipher-algo AES256 android/app/your-keystore.keystore

Script to decrypt the Google Credential Key

Let’s create a script to decrypt the Keystore and the Google Credential so that we can use them in our workflow. Create scripts/android-gpg-decrypt.sh and add the following codes:

    #!/bin/sh

    # --batch to prevent interactive command --yes to assume "yes" for questions
    gpg --quiet --batch --yes --decrypt --passphrase="$ENCRYPT_PASSWORD" \
    --output ./android/app/your-keystore.keystore ./android/app/your-keystore.keystore.gpg

    gpg --quiet --batch --yes --decrypt --passphrase="$ENCRYPT_PASSWORD" \
    --output ./android/app/your-secret.json ./android/app/your-secret.json.gpg

Updating Workflow

The ENCRYPT_PASSWORD is the password that you used to encrypt your secret files and we will put it as an environment variable later. Now let’s add the remaining steps to complete the Android workflow.

    name: Publish React Native App to App Store and Play Store

    on:
      release:
        type: [published]

    jobs:
      release-ios:
        ...

      release-android:
        name: Build and release Android app
        runs-on: ubuntu-latest
        steps:
          ...
                - name: Jetifier AndroidX transition 
            run: npx jetify
                - name: Decrypt keystore and Google Credential
            run: sh ./scripts/android-gpg-decrypt.sh
            env:
              ENCRYPT_PASSWORD: ${{ secrets.GPG_ENCRYPT_PASSWORD }}
                - name: Dump secrets to .env
            run: env > .env
            env:
              REQUIRED_ENV: ${{ secrets.REQUIRED_ENV }}
          - name: Bundle and Upload to PlayStore
            run: bundle exec fastlane build_and_release_to_play_store versionName:${{ github.event.release.tag_name }}
            env:
                        VERSION_NAME: ${{ github.event.release.tag_name }}
              GITHUB_RUN_NUMBER: ${{ secrets.GITHUB_RUN_NUMBER }}
              STORE_PASSWORD: ${{ secrets.STORE_PASSWORD }}
              KEY_PASSWORD: ${{ secrets.KEY_PASSWORD }}

In the workflow above, we have added few steps as following:

To add environment variables in Github Actions, we can add env in the steps that need the variables.
We are using the name of the tag as the versionName of the app and GITHUB_RUN_NUMBER as the versionCode so, we have to modify android/app/build.gradle as:

        defaultConfig {
                        ...
                        versionCode System.env.GITHUB_RUN_NUMBER.toInteger() ?: 1
                        versionName System.getenv("VERSION_NAME") ?: "0.1.0"
                        ...
        }

We are dumping the required secrets to .env file as there might be cases where we need to input the secrets using react-native-dotenv
npx jetify was done for backward compatibility as some might be older packages

Updating Fastfile

We are almost there. Now create fastlane/Fastfile add the build_and_release_to_play_store action in the Fastfile.

    lane :build_and_release_to_play_store do |options|
      # Bundle the app
      gradle(
        task: 'bundle',
        build_type: 'Release',
        project_dir: "android/"
      )

      # Upload to Play Store's Internal Testing
      upload_to_play_store(
        package_name: 'com.example.app',
        track: "internal",
        json_key: "./android/app/your-secret.json",
        aab: "./android/app/build/outputs/bundle/release/app.aab"
      )
    end

Build and Publish iOS app

To build an iOS app, we will need to sign the IPA before upload it to App Store Connect and there is no easy way of doing it in the CI/CD environment.

Update the `fastlane` directory

First, let's generate the Appfile, go into ios directory and then fastlane init. After completing, copy the Appfile into pre-existing folder fastlane in the root (if you have followed above android steps), else make new fastlane folder in the root and copy the Appfile and Fastfile.

PS. Copy the Gemfile and Gemfile.lock to root, and then delete both of them and the fastlane folder inside ios directory as well and edit the Gemfile as:

    source "https://rubygems.org"

    gem "fastlane"
    gem "cocoapods"

Match(`sync_code_signing`) to generate new certificates

Fastlane provides the sync_code_signing action for us to handle the code signing easily. If you have not set up code signing before, please follow the codesigning guideline to generate your certificates and provisioning profiles or follow us:

Run fastlane match init
We are going to choose google_cloud bucket, cause adding it though private-github-repo is a pain in itself as we cannot change the SSH
Once logged in, we create or switch to a project, if you have followed the android steps, you might already have a project and keys already setup, but we advice you to create a new one
Now, copy the key paste it into project root, rename it as gc_keys.json add it into .gitignore. Then, create a bucket.
Enter the name of your bucket and then add the permission as Storage Admin to the service account previously created on step 3
Now, you will have a Matchfile in the fastlane directory, modify it as:

        google_cloud_bucket_name("bucket-name")

        storage_mode("google_cloud")

        type("appstore") # The default type, can be: appstore, adhoc, enterprise or development

        app_identifier(["com.example.app"])
        username("apple-publish@email.com") # Your Apple Developer Portal username

Before running match for the first time, you should consider clearing your existing profiles and certificates. Let's do that:

        fastlane match nuke development
        fastlane match nuke distribution
        fastlane match nuke enterprise

Now, run the following to generate new certificates and profiles:

        fastlane match appstore
        fastlane match development

Congratulations, you've successfully added new certificates named in the format as:
Match AppStore com.example.app and Match Development com.example.app

Encrypt the Google Credential Key

    gpg --symmetric --cipher-algo AES256 gc_keys.json

Script to decrypt the Google Credential Key

Now, let’s create a script to decrypt the gc_keys.json so that we can use them in our workflow. Create scripts/ios-gpg-decrypt.sh and add the following codes:

    #!/bin/sh

    gpg --quiet --batch --yes --decrypt --passphrase="$ENCRYPT_PASSWORD" \
    --output ./gc_keys.json ./gc_keys.json.gpg

Updating Workflow

    name: Publish React Native App to App Store and Play Store

    on:
      release:
        type: [published]

    jobs:
      release-ios:
        name: Build and release iOS app
        runs-on: macOS-latest
        steps:
          ...
                - name: Decrypt Google Cloud Key
            run: sh ./scripts/ios-gpg-decrypt.sh
            env:
              ENCRYPT_PASSWORD: ${{ secrets.GPG_ENCRYPT_PASSWORD }}
                - name: Dump secrets to .env
            run: env > .env
            env:
              REQUIRED_ENV: ${{ secrets.REQUIRED_ENV }}
          - name: Build and Upload to TestFlight
            run: bundle exec fastlane build_and_release_to_app_store versionName:${{ github.event.release.tag_name }}
            env:
                        VERSION_NAME: ${{ github.event.release.tag_name }}
              GITHUB_RUN_NUMBER: ${{ secrets.GITHUB_RUN_NUMBER }}
              FASTLANE_PASSWORD: ${{ secrets.FASTLANE_PASSWORD }}
              FASTLANE_SESSION: ${{ secrets.FASTLANE_SESSION }}
              FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD }}

      release-android:
        ...

In the workflow above, we have added a few steps as follows:

To add environment variables in Github Actions, we can add env in the steps that need the variables.
We are using the name of the tag as the version_number of the app and GITHUB_RUN_NUMBER as the build_number
FASTLANE_PASSWORD takes the actual app-store-connect password
You must have the 2FA open on the account since we need to authorize it from the Github-Actions itself, so:
- You need to generate a login session for Apple ID in advance by running fastlane spaceauth -u apple-publish@email.com. The generated value then has to be stored inside the FASTLANE_SESSION environment variable on your CI system. Please note:
  1. An Apple ID session is only valid for a certain region, meaning if your CI system is in a different region than your local machine, you might run into issues
  2. An Apple ID session is only valid for up to a month, meaning you'll have to generate a new session every month. Usually, you'd only know about it when your build starts failing
- If you want to upload builds to App Store Connect or TestFlight from your CI machine, you need to generate an application-specific password:
  1. Visit appleid.apple.com/account/manage
  2. Generate a new application-specific password
  3. Provide the password by FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD
We are dumping the required secrets to .env file as there might be cases where we need to input the secrets using react-native-dotenv

Updating Fastfile

Now let’s add build_and_release_to_app_store actions into Fastfile.

    lane :buid_and_release_to_play_store do |options|
      ...
    end

    lane :build_and_release_to_app_store do |options|
        # Pod Install
      cocoapods(
        podfile: "./ios/Podfile"
      )

        # Set the build number
      increment_build_number(
        build_number: ENV["GITHUB_RUN_NUMBER"],
        xcodeproj: "./ios/app.xcodeproj"
      )

      # Set the version name
      increment_version_number(
        version_number: ENV["VERSION_NAME"],
        xcodeproj: "./ios/app.xcodeproj"
      )

      # Create a custom keychain for code signing
      create_keychain(
        name: 'keychain',
        password: 'password',
        default_keychain: true,
        unlock: true,
        timeout: 3600,
        add_to_search_list: true
      )

      # Import the appstore code signing
      match(
        type: "appstore",
        keychain_name: 'keychain',
        keychain_password: 'password',
            app_identifier: ["com.example.app"],
        readonly: true
      )

        # Disable automatic signing
        update_code_signing_settings(
        use_automatic_signing: false,
        path: "./ios/app.xcodeproj"
      )

        # Building the iOS app
      gym(
        workspace: "./ios/app.xcworkspace",
        include_bitcode: true,
        include_symbols: true,
        silent: true,
        clean: true,
        scheme: "App",
        export_method: "app-store",
        xcargs: {
          PROVISIONING_PROFILE_SPECIFIER: "match AppStore com.example.app"
        }
      )

        # Enable automatic signing
        update_code_signing_settings(
        use_automatic_signing: true,
        path: "./ios/app.xcodeproj"
      )

      # Upload to testflight
      testflight(
        app_identifier: "com.example.app",
        username: "apple-publish@email.com",
        skip_submission: true,
        skip_waiting_for_build_processing: true
      )
    end

In the Fast-file above, we have added a few steps as follows:

Remember we add the cocopods gem earlier, we are going to use it now for pod install
We create a custom-keychain to store the provisioning certificates, however, we had set match as readonly so that we only extract the previously created certificates, rather than regenerating new ones
Also use_automatic_signing is set to false cause there higher chance than your .xcodeproj has set it so, and if we don't do that, we cannot append our PROVISIONING_PROFILE_SPECIFIER. To eradicate this, you can uncheck the Automatic Signing and set the Provisioning Profile here.

Testing Your Workflow

To test your workflow, you can create a Release and go to the Actions tab in Github to view the log of your workflow.

Watching the logs

Watching the logs scroll up the window is a very satisfying feeling. Recently, Github Actions started supporting streaming the logs, but there is one big caveat. You can only see the logs that were printed after you loaded the page.

Final Notes

Github-Actions is good, while the pricing side it's good:

On the Linux/Docker front, you get 2000 minutes for free (3000 minutes with a Pro subscription)
Building on macOS, you pay per minute, which means it’s a lot cheaper if you stay under 500 minutes

However, Use GitHub actions at your own risk as said by Julien Renaux, cause the secrets approach is quite flimsy, heard they are working on an API to fix that exactly🤞. We can only hope.

Thanks for giving this a read. We will continue to keep you posted on the updates and cool stuff.

Until next time 👋

Sunim - https://prep.surf/blog/auto-build-github-action

HOW-TO: Sign in with Apple on React and React-Native using Node

Sunim — Tue, 31 Mar 2020 13:44:46 +0000

Dealing with Apple is a pain, ask any devs around. So I'll be writing a quick guide to setup Apple Sign in a couple of minutes (depending on Apple 🤷‍♂️)

├── Setting Up Developer Portal
├── Setting Up React.js
├── Setting Up Node
├── Setting Up React-Native

Setting Up Developer Portal:

First, sign in to the Apple Developer Portal and enroll if you have not already, and then click on Certificates, Identifiers and Profiles.

Setting up App ID

From the sidebar, choose Identifiers then click the blue plus icon.

PS. If you have already set up your react-native-app you'll see a different screen. Choose the right Bundle ID only and go to Adding Sign-in Capability.

Choose App ID

Now, Choose App IDs in this first step.

Now, choose a description and Bundle ID for the App ID. It is best when it’s a reverse-dns style string. So my suggestion, if www.example.com is your web-app URL, com.example.app can be your Bundle ID.

Add Capability

You’ll also want to scroll down through the list of capabilities and check the box next to Sign In with Apple and Enable it as Primary App ID.

Setting up Service ID

Now Go ahead and create a new identifier and choose Services IDs.

In the next step, you’ll define the name of the app that the user will see during the login flow, as well as define the identifier which becomes the OAuth client_id.
You can set it as app.example.com as com.example.app is used for Bundle ID.

PS. Make sure to also check the Sign In with Apple checkbox.

You’ll also need to click the Configure button next to Sign In with Apple in this step. This is where you’ll define the domain your app is running on, as well as define the redirect URLs used during the OAuth flow.

PS. Apple doesn’t allow localhost URLs in this step. You have to use a real domain here or use Ngrok.

Go ahead and click Save and then Continue and Register until this step is all confirmed.

Setting up Private Key

You actually have more steps to do generate Key. Either follow the guide by Aaron Parecki or hop on:
Back in the main Certificates, Identifiers & Profiles screen, choose Keys from the side navigation.

Click the blue plus icon to register a new key. Give your key a name, and check the Sign In with Apple checkbox.

Click the Configure button and select the primary App ID you created earlier.

Apple will generate a new private key for you and let you download it only once. Make sure you save this file because you won’t be able to get it back again later. Then, press Done.

Setting Up React.js:

Damn, long process right? Bare with me, now is the easier part. The first thing you need to do is add the apple script. We use scriptjs for that.

Init AppleID

scriptjs.get('https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js', () => {
  const params = {
    clientId: 'app.example.com',
    redirectURI: 'https://www.example.com/apple/callback',
    scope: 'name email',
  };
  window.AppleID.auth.init(params);
});

SignIn AppleID

Next, create a button with onClick function <button onClick={() => window.AppleID.auth.signIn()}/>

It'll open the Apple View, it's different on Safari however, but I'll be attaching the Screenshot of other browsers here:

Now, after continuing, it'll forward a POST request 🤦‍♂️. We know to handle it inside React/Next is a task on its own.

Setting Up Node:

So, we define the route /apple/callback on the backend and redirect to /app route being handled in the frontend.

app.use('/apple/callback', function(req, res) {
  console.log(req.body);
});

Handling JWT

We have the id_token and code inside body. If you want to validate the user using code, please follow the guide by Arjun Komath
cause we'll only be using id_token.

You have two ways of getting the user. Since the id_token is just a jwt we can:

Extract the JWT
Validate the JWT

Extract JWT

const getAppleUserId = async token => {
  const parts = token.split('.');
  try {
    return await JSON.parse(new Buffer(parts[1], 'base64').toString('ascii'));
  } catch (e) {
    return null;
  }
};

app.use('/apple/callback', function(req, res) {
  const user = await getAppleUserId(req.body.id_token);
  console.log(user);
});

Validate the JWT

import axios from 'axios';
import NodeRSA from 'node-rsa';
import jsonwebtoken from 'jsonwebtoken';

async function _getApplePublicKeys() {
  return axios
    .request({
      method: 'GET',
      url: 'https://appleid.apple.com/auth/keys',
    })
    .then(response => response.data.keys);
}

const getAppleUserId = async token => {
  const keys = await _getApplePublicKeys();
  const decodedToken = jsonwebtoken.decode(token, { complete: true });
  const kid = decodedToken.header.kid;
  const key = keys.find(k => k.kid === kid);

  const pubKey = new NodeRSA();
  pubKey.importKey(
    { n: Buffer.from(key.n, 'base64'), e: Buffer.from(key.e, 'base64') },
    'components-public'
  );
  const userKey = pubKey.exportKey(['public']);

  return jsonwebtoken.verify(token, userKey, {
    algorithms: 'RS256',
  });
};

app.use('/apple/callback', function(req, res) {
  const user = await getAppleUserId(req.body.id_token);
  console.log(user);
});

Where,

_getApplePublicKeys is just fetching the multiple keys from https://appleid.apple.com/auth/keys.
Decode the id_token to extract the kid and extract the exact key which matches the kid of id_token.
Build the RSA and verify the jwt.

Forwarding to Frontend

Then, you can forward the user details by sending the data as:

app.use('/apple/callback', function(req, res) {
  const user = await getAppleUserId(req.body.id_token);
  res.redirect(303, 'https://www.example.com/app?user=${JSON.stringify(req.body.id_token)}');
});

Now, define a route /app inside react.js and then, on useEffect or componentDidMount just use query-string to get the user.

const user = queryString.parse(location.search).user;
console.log(JSON.parse(user));

PS. You can also set the cookie on the backend and parse it using react-cookie.

Setting Up React-Native:

It's fairly simple on the react-native though with the introduction of react-native-apple-authentication package.

You can just follow the Initial-Setup Guide or hop on:

Add Sign-in capability

Taking into consideration that you already have Target setup on XCode with bundle id com.example.app, just add the Sign In with Apple capability inside:

PS. You need a valid team, however, once you set it you will see a screen similar to this:

Now, if you have not followed the guide from above you need to have your AppID setup in Identifiers. Follow the guide above for AppID only and come back here.

Note: Enable the APP ID as a primary if not already and click the Save button.

Now that you have everything set up, just add the package:

yarn add @invertase/react-native-apple-authentication

And then use the AppleButton where you can add custom-styles as well. On pressing the button, we call a function to extract the identityToken with scope of for email and name.

import { Platform } from 'react-native';
import appleAuth, {
  AppleButton,
  AppleAuthRequestScope,
  AppleAuthRequestOperation,
} from '@invertase/react-native-apple-authentication';

const appleAuth = () => {
  const token = appleAuth
    .performRequest({
      requestedOperation: AppleAuthRequestOperation.LOGIN,
      requestedScopes: [
        AppleAuthRequestScope.EMAIL,
        AppleAuthRequestScope.FULL_NAME,
      ],
    })
    .then(
      res => {
        return res.identityToken;
      },
      error => {
        console.log(error);
      }
    );
  console.log(token);
  // TODO: Send the token to backend
};

export const appleButton = () => {
  return (
    <>
      {Platform.OS === 'ios' && (
        <AppleButton
          buttonType={AppleButton.Type.CONTINUE}
          onPress={() => appleAuth()}
        />
      )}
    </>
  );
};

Now that we have the token, we send it to our node-backend. However, above we are handling for the condition of callback_url and POST Request. Here, we'll use the same logic of getAppleUserId, so we'll just send the token to /apple/login backend route as:

import HttpStatus from 'http-status-codes';

app.use('/apple/login', function(req, res) {
  const user = await getAppleUserId(req.body.token);
  res.status(HttpStatus.OK).json({ user });
});

Where,

getAppleUserId is defined above. Just have a look at it where we either extract or validate the jwt and extract the data.

Next, we forward the user back to react-native-client.

Conclusion

Setting it up is definitely not easy and requires patience. It took a lot of time for us as well and we intend to solve it for you. There might be some grammatical mistakes or logic issues here and there, do let me know if you find it.

Thanks for giving this a read. We will continue to keep you posted on the updates and cool stuff.

Until next time 👋

Sunim - https://prep.surf/blog/new-landing-page

DEV Community: Sunim

[Haystack] Async Pipeline Streaming over FastAPI

Need for this blog

Hand Holding

Packages

FastAPI

Pipeline

The Hard Part

Chunking in SSE Format

Frontend

Final Notes

Auto React-Native builds (CD) with Github-Actions and Fastlane

Scenario

Github Actions

Fastlane

Setting up Github Actions

Creating Workflow

Setting Trigger Event

Creating Jobs and Defining Steps

Build and Publish Android app

Getting Google Credential Keys

Encrypt the Google Credential Key

Script to decrypt the Google Credential Key

Updating Workflow

Updating Fastfile

Build and Publish iOS app

Update the fastlane directory

Match(sync_code_signing) to generate new certificates

Encrypt the Google Credential Key

Script to decrypt the Google Credential Key

Updating Workflow

Updating Fastfile

Testing Your Workflow

Watching the logs

Final Notes

HOW-TO: Sign in with Apple on React and React-Native using Node

Setting Up Developer Portal:

Setting up App ID

Choose App ID

Add Capability

Setting up Service ID

Setting up Private Key

Setting Up React.js:

Init AppleID

SignIn AppleID

Setting Up Node:

Handling JWT

Extract JWT

Validate the JWT

Forwarding to Frontend

Setting Up React-Native:

Add Sign-in capability

Conclusion

Update the `fastlane` directory

Match(`sync_code_signing`) to generate new certificates