OAuth is a common technique for registering and authenticating users on web and mobile apps. Many interactions in a Hotwire-based Rails app work without requiring native code but that’s not the case for OAuth.

Hotwire Native uses embedded web views to navigate the application. This works well for most web pages but is considered insecure by Google and other OAuth providers.¹

…[Google] introduced a new secure browser policy prohibiting Google OAuth requests in embedded browser libraries commonly referred to as embedded webviews. All embedded webviews will be blocked…¹

If we try to use a web view, Google tells us they’ve blocked this user agent.

Instead of using a web view, its recommended to use a system browser.²

This post describes how to implement OAuth in a Hotwire Native application using a minimum of native code. We will first show how to implement OAuth in a Rails app and then show how to extend it to support Hotwire Native.

Web Implementation

Web-based OAuth Sign In

Before we implement OAuth on our iOS and Android apps, we need to implement it in our web app.

It’s common to use libraries like Devise and Omniauth for authentication and OAuth but here we’re going to use the Rails authentication generator and use the OAuth libraries directly instead of Omniauth. The primary reason for this is that the Apple Omniauth library does not seem to be actively maintained and monkey-patching is required to get it to work.³ It’s also easier to troubleshoot issues that arise if we are implementing the code ourselves.

The following sequence diagram describes the web OAuth process we’ll implement.

sequenceDiagram
    actor User
    participant Browser
    participant Rails
    participant Apple

    User->>Browser: click "Sign in with ..."
    Browser->>Rails: POST /apple_oauth_sessions
    Rails-->>Browser: 302 https://appleid.apple.com/auth/authorize...
    Browser->>Apple: GET https://appleid.apple.com/auth/authorize...
    Apple-->>Browser: 200 OK
    User->>Browser: fill in credentials
    Browser->>Apple: POST https://appleid.apple.com/appleauth/auth/oauth/authorize
    Apple-->>Browser: 200 OK
    Browser->>Rails: POST /apple_oauth_sessions/callback
    Note over Browser,Rails: Authenticate user
    Rails-->>Browser: 302 /entries
    Browser->>Rails: GET /entries
    Rails-->>Browser: 200 OK

The only Gem we will need is JWT to parse the JSON web token we receive from the OAuth provider. Add the following to your Gemfile and run bundle install.

gem "jwt", "~> 3.1.2"

We will need to create a new controller with two actions. The first action will redirect the user to the OAuth provider. The second action will be called by the OAuth provider and it will register and/or sign in the user.

resource :apple_oauth_sessions, only: %i[ create ] do
  collection do
    post :callback
  end
end

The create action builds the OAuth provider’s authorization URL using:

1. a client ID you get from the provider
2. a callback URL that is called after the user authentications with the provider
3. a state and nonce you generate and store for verification later.

The state and nonce cookies for Apple’s OAuth implementation must be SameSite: None; Secure since Apple implicitly triggers a new session by using a POST callback instead of a GET callback.

The result of the action is an external redirect to the authorization URL.

class AppleOauthSessionsController < ApplicationController
  allow_unauthenticated_access

  def create
    nonce = SecureRandom.urlsafe_base64(16)
    state = SecureRandom.hex(24) + ":" + params[:platform]
    redirect_uri = callback_apple_oauth_sessions_url

    cookies.encrypted[:apple_oauth_state] = {
      same_site: :none,
      expires: 1.hour.from_now,
      secure: true,
      value: state
    }
    cookies.encrypted[:apple_oauth_nonce] = {
      same_site: :none,
      expires: 1.hour.from_now,
      secure: true,
      value: nonce
    }

    oauth_client = AppleOauthClient.new
    authorization_url = oauth_client.authorization_url(
      state: state,
      nonce: nonce,
      redirect_uri: redirect_uri
    )

    redirect_to authorization_url, allow_other_host: true
  end
end

class AppleOauthClient
  AUTHORIZE_URL = "https://appleid.apple.com/auth/authorize"

  def authorization_url(state:, nonce:, redirect_uri:)
    query_string = {
      client_id:,
      nonce:,
      redirect_uri:,
      response_mode: "form_post",
      response_type: "code",
      scope: "email name",
      state:
    }.to_query

    "#{AUTHORIZE_URL}?#{query_string}"
  end

  private

  def client_id
    Rails.application.credentials.dig(:apple, :service_identifier)
  end
end

The callback action is called by the OAuth provider after the user is authenticated by the provider. It starts by verifying the authenticity of the request. If the request is authentic, the user is created and signed in. If the request is not authentic, the user is redirected to the login page.

class AppleOauthSessionsController < ApplicationController
  skip_before_action :verify_authenticity_token, only: [ :callback ]
  allow_unauthenticated_access
  before_action :verify_oauth_state, only: [ :callback ]
  before_action :verify_oauth_nonce, only: [ :callback ]

  def callback
    user_info = authenticate_with_apple
    user = create_user(user_info)
    unless user.persisted?
      redirect_to new_session_path, alert: "Unable to sign in. Please try again."
      return
    end
    
    sign_in_and_redirect_user(user)
  rescue => e
    redirect_to new_session_path, alert: "Unable to sign in. Please try again."
  end

  private

  def authenticate_with_apple
    oauth_client = AppleOauthClient.new
    oauth_client.authenticate(
      code: params[:code],
      redirect_uri: callback_apple_oauth_sessions_url,
      nonce: stored_nonce
    )
  end

  def create_user(user_info)
    OauthUserService.find_or_create(
      oauth_provider: :apple,
      current_user: authenticated? ? current_user : nil,
      uid: user_info[:uid],
      email: user_info[:email]
    )
  end

  def verify_oauth_state
    stored_state = cookies.encrypted[:apple_oauth_state]
    cookies.delete(:apple_oauth_state)
    unless params[:state].present? && ActiveSupport::SecurityUtils.secure_compare(params[:state], stored_state)
      redirect_to new_session_path, alert: "Invalid request. Please try again."
    end
  end

  def verify_oauth_nonce
    unless stored_nonce.present?
      redirect_to new_session_path, alert: "Invalid request. Please try again."
    end
  end

  def sign_in_and_redirect_user(user)
    start_new_session_for user
    redirect_to after_authentication_url
  end

  def stored_nonce
    return @stored_nonce if defined?(@stored_nonce)
    @stored_nonce = cookies.encrypted[:apple_oauth_nonce]
    cookies.delete(:apple_oauth_nonce)
    @stored_nonce
  end
end

AppleOauthClient#authenticate is called by the controller action above to exchange the code received from the provider for a JWT which contains the authenticated user’s information like their email address.

class AppleOauthClient
  TOKEN_URL = "https://appleid.apple.com/auth/token"
  KEYS_URL = "https://appleid.apple.com/auth/keys"

  def authenticate(code:, redirect_uri:, nonce:)
    tokens = exchange_code_for_tokens(code, redirect_uri)

    unless tokens && tokens["id_token"]
      raise AuthenticationError, "Failed to exchange code for tokens"
    end

    user_info = decode_id_token(tokens["id_token"])

    # Verify nonce matches to prevent replay attacks
    unless user_info["nonce"] == nonce
      raise AuthenticationError, "Nonce verification failed"
    end

    {
      uid: user_info["sub"],
      email: user_info["email"]
    }
  end

  class AuthenticationError < StandardError; end

  private

  def client_id
    Rails.application.credentials.dig(:apple, :service_identifier)
  end

  def generate_client_secret
    # Apple requires a JWT signed with your private key
    private_key = OpenSSL::PKey::EC.new(Rails.application.credentials.dig(:apple, :private_key))

    headers = {
      kid: Rails.application.credentials.dig(:apple, :key_id)
    }

    claims = {
      iss: Rails.application.credentials.dig(:apple, :team_id),
      iat: Time.now.to_i,
      exp: Time.now.to_i + 86400 * 180, # 180 days
      aud: "https://appleid.apple.com",
      sub: client_id
    }

    JWT.encode(claims, private_key, "ES256", headers)
  end

  def exchange_code_for_tokens(code, redirect_uri)
    client_secret = generate_client_secret

    response = Net::HTTP.post_form(
      URI(TOKEN_URL),
      client_id:,
      client_secret:,
      code:,
      grant_type: "authorization_code",
      redirect_uri:
    )

    JSON.parse(response.body) if response.is_a?(Net::HTTPSuccess)
  end

  def decode_id_token(id_token)
    jwks = JSON.parse(Net::HTTP.get(URI(KEYS_URL)), symbolize_names: true)
    jwks_keys = jwks[:keys]
    JWT.decode(id_token, nil, true, { jwks: { keys: jwks_keys }, algorithm: "RS256" }).first
  end
end

We need to to add a form and a Sign in with Apple button to the sign in page.

<%= form_with(
  url: apple_oauth_sessions_path, 
  method: :post, 
  data: { 
    turbo: false
  }) do |form| %>
  <%= form.submit "Sign in with Apple", class: "btn-outline w-full" %>
<% end %>

Setting data-turbo="false" is important. If we don’t do this, Turbo will perform the form submission over JavaScript and OAuth providers will block the request as a security measure.

CORS Policy Error when using Turbo

Sign in with Apple is now working on the web.

Hotwire Native implementation

Native OAuth Sign In

By default, Hotwire Native apps use a web view. This is a problem for OAuth since web views are disallowed for security reasons. Instead, we need to use a system browser.

We will create a brige component that is reponsbile for starting the OAuth process in a system browser. The bridge component will be given two values: a start path and a token authentication path. The bridge component will intercept the “Sign in with …” form submission. Instead of directly redirecting the user to the OAuth provider, the bridge component will send a message to the native bridge component. The native bridge component will start a system browser and within it navigate to the start path provided by the bridge component. The start page will have a form on it that automatically submits when the page loads. This form will redirect the user to the OAuth provider within the system browser.

After the user fills in their credentials on the OAuth provider’s site, the OAuth provider will call the callback endpoint. We cannot sign in the user during this callback since the callback runs inside the system browser and we want the user to be authenticated within the web view. Instead, the callback will redirect the user to the native app using a custom scheme URL along with a signed token representing the user. When the app is opened by the custom scheme URL, we’ll have the app close the system browser and call the token authentication endpoint provided to the bridge component from within the web view. The user will now be authenticated within the web view and can use the app as an authenticated user.

The following sequence diagram describes this process.

sequenceDiagram
    actor User
    participant WKWebView
    participant SFSafariViewController
    participant Rails
    participant Apple

    User->>WKWebView: click "Sign in with ..."
    WKWebView->>SFSafariViewController: launch
    SFSafariViewController->>Rails: GET /apple_oauth_sessions/new
    Rails-->>SFSafariViewController: 200 OK
    SFSafariViewController->>Rails: POST /apple_oauth_sessions
    Rails-->>SFSafariViewController: 302 https://appleid.apple.com/auth/authorize...
    SFSafariViewController->>Apple: GET https://appleid.apple.com/auth/authorize...
    Apple-->>SFSafariViewController: 200 OK
    User->>SFSafariViewController: provide Apple credentials
    SFSafariViewController->>Apple: POST https://appleid.apple.com/appleauth/auth/oauth/authorize
    Apple-->>SFSafariViewController: 200 OK
    SFSafariViewController->>Rails: POST /apple_oauth_sessions/callback
    Note over SFSafariViewController,Rails: Generate signed token
    Rails-->>SFSafariViewController: 302 rssreader://auth-callback
    SFSafariViewController->>WKWebView: GET rssreader://auth-callback
    WKWebView->>Rails: GET /apple_oauth_sessions/authenticate_by_token
    Note over WKWebView,Rails: Authenticate by signed token
    Rails-->>WKWebView: 302 /entries
    WKWebView->>Rails: GET /entries
    Rails-->>WKWebView: 200 OK

We’ll start by creating the Sign in with OAuth bridge component.

import { BridgeComponent } from "@hotwired/hotwire-native-bridge"

export default class extends BridgeComponent {
  static component = "sign-in-with-oauth"
  static values = {
    startPath: String
  }

  interceptSubmit(event) {
    event.preventDefault()

    const startPath = this.startPathValue
    this.send("click", { startPath })
  }
}

Then we’ll update the Sign in with OAuth form that we created earlier to intercept the form submission. Since this controller is a bridge component, it will only take affect on native apps and the form submission will be a normal form submission on the web.

<%= form_with(
  url: apple_oauth_sessions_path, 
  method: :post,
  data: { 
    controller: "bridge--sign-in-with-oauth", 
    action: "submit->bridge--sign-in-with-oauth#interceptSubmit", 
    bridge__sign_in_with_oauth_start_path_value: new_apple_oauth_sessions_path
  }) do |form| %>
  <%= form.submit "Sign in with Apple", class: "btn-outline w-full" %>
<% end %>

The bridge component needs to know the path for the start page so we’ll create that next.

resource :apple_oauth_sessions, only: %i[ new ... ]

class AppleOauthSessionsController < ApplicationController
  def new
    render :new, layout: false
  end
end

<%= form_with(
  url: apple_oauth_sessions_path,
  method: :post,
  data: {
    controller: "form-submit",
    turbo: false
  }) do |form| %>
  <%= form.hidden_field :platform, value: params[:platform] %>
<% end %>

We’ll add a Stimulus controller to the form to submit it automatically when the page loads.

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.requestSubmit()
  }
}

This native bridge component will receive the “click” event sent by the Stimulus controller, launch the system browser and navigate to the start path within it.

class SignInWithOauthComponent: BridgeComponent {
    ...

    private var safariViewController: SFSafariViewController?

    override func onReceive(message: Message) {
        guard let event = Event(rawValue: message.event) else { return }

        switch event {
        case .click:
            onClick(message: message)
        }
    }

    private func onClick(message: Message) {
        guard let data: MessageData = message.data(),
              let startUrl = URL(string: "\(baseUrl)\(data.startPath)") else { return }
        
        launchSafariViewController(with: startUrl)
    }

    private func launchSafariViewController(with url: URL) {
        let safariVC = SFSafariViewController(url: url)
        safariVC.modalPresentationStyle = .pageSheet
        self.safariViewController = safariVC

        viewController.present(safariVC, animated: true)
    }
}

private extension SignInWithOauthComponent {
    enum Event: String {
        case click
    }

    struct MessageData: Decodable {
        let startPath: String
    }
}

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(
      ...
    ) -> Bool {
        ...
        
        Hotwire.registerBridgeComponents([
            SignInWithOauthComponent.self,
        ])
        
        ...
    }
}

If we test the OAuth process in our native app, we should see the system browser launch and navigate to the OAuth provider’s authorization page. We can fill in our credentials and we’ll be redirected back to site but we’ll only be authenticated within the system browser. We need to be authenticated within the web view.

We need to update the callback action to redirect to the app’s custom scheme URL if the callback is coming from the native app. A signed token representing the user is included in the redirect URL so the native app can authenticate the user.

class AppleOauthSessionsController < ApplicationController
  ...

  def callback
    user_info = authenticate_with_apple
    user = create_user(user_info)
    unless user.persisted?
      redirect_to new_session_path, alert: "Unable to sign in. Please try again."
      return
    end

    platform = params[:state].split(":").last
    if platform == "native"
      token = user.signed_id(purpose: :native_auth, expires_in: 5.minutes)
      redirect_to "rssreader://auth-callback?token=#{token}&platform=#{platform}", allow_other_host: true
    else
      sign_in_and_redirect_user(user)
    end
  rescue => e
    redirect_to new_session_path, alert: "Unable to sign in. Please try again."
  end
end

The native app needs to know what the token authentication path is so we include that in the bridge component.

<%= form_with(
  url: apple_oauth_sessions_path, 
  method: :post,
  data: { 
    controller: "bridge--sign-in-with-oauth", 
    action: "submit->bridge--sign-in-with-oauth#interceptSubmit", 
    bridge__sign_in_with_oauth_start_path_value: new_apple_oauth_sessions_path(platform: "native"),
    bridge__sign_in_with_oauth_token_auth_path_value: authenticate_by_token_apple_oauth_sessions_path
  }) do |form| %>
  <%= form.submit "Sign in with Apple", class: "btn-outline w-full" %>
<% end %>

import { BridgeComponent } from "@hotwired/hotwire-native-bridge"

export default class extends BridgeComponent {
  static component = "sign-in-with-oauth"
  static values = {
    startPath: String,
    tokenAuthPath: String,
  }

  interceptSubmit(event) {
    event.preventDefault()

    const startPath = this.startPathValue
    const tokenAuthPath = this.tokenAuthPathValue
    this.send("click", { startPath, tokenAuthPath })
  }
}

class SignInWithOauthComponent: BridgeComponent {
    ...

    private var tokenAuthPath: String?

    override func onReceive(message: Message) {
        guard let event = Event(rawValue: message.event) else { return }

        switch event {
        case .click:
            onClick(message: message)
        }
    }

    private func onClick(message: Message) {
        ...

        self.tokenAuthPath = data.tokenAuthPath

        launchSafariViewController(with: startUrl)
    }
    ...
}

private extension SignInWithOauthComponent {
    enum Event: String {
        case click
    }

    struct MessageData: Decodable {
        let startPath: String
        let tokenAuthPath: String
    }
}

The token authentication action will take the token, lookup the corresponding user and sign in the user.

resource :apple_oauth_sessions, only: %i[ ... ] do
  collection do
    get :authenticate_by_token
  end
end

class AppleOauthSessionsController < ApplicationController
  ...

  def authenticate_by_token
    user = User.find_signed(params[:token], purpose: :native_auth)
    if user
      sign_in_and_redirect_user(user)
    else
      redirect_to welcome_path, alert: "Unable to sign in. Please try again."
    end
  end
end

We need the native component to close the system browser and navigate to the token authentication path when the callback is received. We’ll achieve this by adding an observer when the system browser is launched. When the callback endpoint redirects back to the app via the custom scheme URL, we’ll trigger the observer’s callback function which will close the system browser and navigate to the token authentication path in the web view.

class SignInWithOauthComponent: BridgeComponent {
    ...

    private func launchSafariViewController(with url: URL) {
        ...

        NotificationCenter.default.addObserver(
            self,
            selector: #selector(handleAuthCompletion),
            name: .signInWithOauthCompleted,
            object: nil
        )
   }

    @objc private func handleAuthCompletion(_ notification: Notification) {
        NotificationCenter.default.removeObserver(self, name: .signInWithOauthCompleted, object: nil)

        let token = notification.userInfo?["token"] as? String

        safariViewController?.dismiss(animated: true) { [weak self] in
            self?.safariViewController = nil
            self?.authenticateWithToken(token)
        }
    }

    private func authenticateWithToken(_ token: String?) {
        guard let webViewController = delegate?.destination as? HotwireWebViewController,
              let webView = webViewController.visitableView.webView else { return }

        if let token = token, let tokenAuthPath = tokenAuthPath {
            guard let tokenLoginUrl = URL(string: "\(baseUrl)\(tokenAuthPath)") else { return }

            var components = URLComponents(url: tokenLoginUrl, resolvingAgainstBaseURL: false)
            components?.queryItems = [URLQueryItem(name: "token", value: token)]

            if let url = components?.url {
                webView.load(URLRequest(url: url))
            }
        } else {
            webView.reload()
        }
    }
}

...

extension Notification.Name {
    static let signInWithOauthCompleted = Notification.Name("signInWithOauthCompleted")
}

extension SceneController: UIWindowSceneDelegate {
    func scene(
       ...
    ) {
        ...

        if let urlContext = connectionOptions.urlContexts.first {
            handleIncomingURL(urlContext.url)
        }
    }

    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        guard let url = URLContexts.first?.url else { return }
        handleIncomingURL(url)
    }

    private func handleIncomingURL(_ url: URL) {
        guard let host = url.host else { return }

        switch host {
        case "auth-callback":
            let components = URLComponents(url: url, resolvingAgainstBaseURL: false)
            let token = components?.queryItems?.first(where: { $0.name == "token" })?.value

            NotificationCenter.default.post(
                name: .signInWithOauthCompleted,
                object: nil,
                userInfo: token != nil ? ["token": token!] : nil
            )
        default:
           ...
        }
    }
}

The OAuth sign in process is now working in the Hotwire Native app. The code can be found on Github here.

What’s Next

This post only covers OAuth for Apple. A follow up post will describe how to implement the same approach described here in an Hotwire Native Android app with Google Sign In.

Reach out to me on my socials if you have any questions or feedback. I’m especially curious about alternative approaches implementing OAuth in Hotwire Native apps.

I recently struggled a lot with implementing Apple OAuth for my Hotwire Native app Calendar Vision so I figured I would share out what I did. I would love to hear if there are better ways to do some of this.

The first screen the user sees when opening the iOS app is a native screen that allows the user to sign in with Apple. The callback that Apple redirects to after authentication is the same Devise Ominauth endpoint that the web app uses. This allowed me to use the same cookie-based authentication regardless of log in method.

iOS Code

The native screen is implemented with a custom view controller. This view controller is visited by configuring the getting started URL to point at a view controller in the path configuration.

{
  patterns: [
    hotwire_native_get_started_path
  ],
  properties: {
    uri: "hotwire://fragment/welcome",
    title: "Welcome"
  }
}

The SceneController handles this path with the WelcomeController

extension SceneController: NavigatorDelegate {
    func handle(proposal: VisitProposal, from navigator: Navigator) -> ProposalResult {
        switch proposal.viewController {
        case WelcomeController.pathConfigurationIdentifier:
            window?.rootViewController = navigator.rootViewController
            return .acceptCustom(welcomeController!)
        default:
            return .accept
        }
    }
}

WelcomeController is defined like this.

extension SceneController: UIWindowSceneDelegate {
    func scene(
        _ scene: UIScene,
        willConnectTo session: UISceneSession,
        options connectionOptions: UIScene.ConnectionOptions
    ) {
        guard let windowScene = scene as? UIWindowScene else { return }
        
        UNUserNotificationCenter.current().delegate = notificationRouter
        
        welcomeController = WelcomeController(onSignInWithAppleSuccess:{ [self] in
            window?.rootViewController = tabBarController
            tabBarController.load(HotwireTab.all)
        }, onError: { [self] message in
            showErrorAlert(title: "Unable to Authenticate", message: message)
        })
        
        Task { await checkAuth(windowScene: windowScene) }
    }
}

The WelcomeController is given an onSignInWithAppleSuccess function that will load the tabBarController when the user successfully signs in with Apple.

The WelcomeController delegates to the WelcomeView

class WelcomeController: UIHostingController<WelcomeView>, PathConfigurationIdentifiable {
    static var pathConfigurationIdentifier: String { "welcome" }
    
    convenience init(onSignInWithAppleSuccess: @escaping () -> Void, onPasswordSignUpClicked: @escaping () -> Void, onContinueWithoutSignUpClicked: @escaping () -> Void, onError: @escaping (String) -> Void) {
        let view = WelcomeView(onSignInWithAppleSuccess: onSignInWithAppleSuccess, onPasswordSignUpClicked: onPasswordSignUpClicked, onContinueWithoutSignUpClicked: onContinueWithoutSignUpClicked, onError: onError)
        self.init(rootView: view)
    }
}

The WelcomeView uses Swift UI and the built in SignInWithAppleButton component.

struct WelcomeView: View {
    var onSignInWithAppleSuccess: () -> Void
    var onError: (String) -> Void
    
    var body: some View {
        SignInWithAppleButton(.signUp) { request in
            request.requestedScopes = [.fullName, .email]
        } onCompletion: { result in
            switch result {
            case .success(let authorization):
                handleSuccessfulLogin(with: authorization)
            case .failure(let error):
                handleLoginError(with: error)
            }
        }
        .frame(height: 50)
        .cornerRadius(8)
    }
}

When authentication with Apple is successful, we’re giving authorization data and we need to call the Rails app to log in.

private func handleSuccessfulLogin(with authorization: ASAuthorization) {
    if let userCredential = authorization.credential as? ASAuthorizationAppleIDCredential {
        guard let identityToken = userCredential.identityToken,
              let identityTokenString = String(data: identityToken, encoding: .utf8),
              let authorizationCode = userCredential.authorizationCode,
              let authorizationCodeString = String(data: authorizationCode, encoding: .utf8) else {
            print("Failed to get identity token or authorization code")
            return
        }
        
        Task {
            await sendToOmniauthCallback(
                identityToken: identityTokenString,
                authorizationCode: authorizationCodeString,
                userIdentifier: userCredential.user,
                email: userCredential.email,
                fullName: userCredential.fullName
            )
        }
    }
}

private func sendToOmniauthCallback(
    identityToken: String,
    authorizationCode: String,
    userIdentifier: String,
    email: String?,
    fullName: PersonNameComponents?
) async {
    var components = URLComponents()
    components.scheme = baseUrl.scheme
    components.host = baseUrl.host
    components.port = baseUrl.port
    components.path = "/users/auth/apple/callback"
    
    let queryItems = [
        URLQueryItem(name: "id_token", value: identityToken),
        URLQueryItem(name: "code", value: authorizationCode),
    ]
    
    components.queryItems = queryItems
    
    guard let callbackURL = components.url else {
        print("Failed to build callback URL")
        return
    }
    
    print("Sending callback to: \(callbackURL)")
    
    var request = URLRequest(url: callbackURL)
    request.httpMethod = "POST"
    
    do {
        let (_, response) = try await URLSession.shared.data(for: request)
        
        if let httpResponse = response as? HTTPURLResponse {
            print("Rails callback response status: \(httpResponse.statusCode)")
            
            if httpResponse.statusCode == 200 || httpResponse.statusCode == 302 {
                // Cookies from the callback must be copied to the cookie store so the rest of the app can be authenticated
                await copyCookiesToCookieStore(from: httpResponse)
                
                // Refresh tabs to reflect authenticated state
                await MainActor.run {
                    onSignInWithAppleSuccess()
                }
            } else {
                print("Rails callback failed with status: \(httpResponse.statusCode)")
            }
        }
    } catch {
        print("Failed to send callback to Rails: \(error)")
    }
}

// I'd like to refactor this to a utility class but I got a EXC_BREAKPOINT when I tried that
private func copyCookiesToCookieStore(from response: HTTPURLResponse) async {
    guard let url = response.url,
          let headerFields = response.allHeaderFields as? [String: String] else {
        return
    }
    
    let cookies = HTTPCookie.cookies(withResponseHeaderFields: headerFields, for: url)
    let cookieStore = WKWebsiteDataStore.default().httpCookieStore
    
    print("Copying \(cookies.count) cookies to web view store")
    
    for cookie in cookies {
        await cookieStore.setCookie(cookie)
    }
}

There’s a lot of code here but it’s really just two things happening.

1. Call the Devise Ominauth callback endpoint with the authorization data
2. Copy the cookies from that request callback request into the cookie store so the rest of the Hotwire Native app can make use of the authenticated session.

Rails Code

The Rails code for this is pretty similar to the code needed to get Sign in with Apple working on the web. I’m using Devise, Omniauth and the Omniauth Apple gems.

These gems need to be configured with all the different Apple identifiers. This was probably the trickiest part of the Rails code.

  config.omniauth(
    :apple,
    Rails.application.credentials.dig(:ios, :service_identifier),
    "",
    {
      scope: "email name",
      team_id: Rails.application.credentials.dig(:ios, :team_id),
      key_id: Rails.application.credentials.dig(:ios, :key_id),
      pem: Rails.application.credentials.dig(:ios, :apns_key),
      provider_ignores_state: true,
      authorized_client_ids: [ Rails.application.credentials.dig(:ios, :service_identifier), Rails.application.credentials.dig(:ios, :bundle_identifier) ],
      nonce: :local
    },
  )

The Omniauth callback looks like most Omniauth callback endpoints

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  skip_before_action :verify_authenticity_token

  def apple
    user = User.from_omniauth(auth)
    if user.present?
      flash[:notice] = t "devise.omniauth_callbacks.success", kind: "Apple"
      sign_in_and_redirect user, event: :authentication
    else
      flash[:alert] =
        t "devise.omniauth_callbacks.failure", kind: "Apple", reason: "#{auth.info.email} is not authorized."
      redirect_to root_path
    end
  end
end

I did need to monkey patch the Omniauth Apple gem. This issue discussion details why this is necessary and was really useful for understanding what needed to be done.

module OmniAuth
  module Strategies
    class Apple
      private def verify_nonce!(id_token)
        invalid_claim! :nonce unless id_token[:nonce] == stored_nonce
      end
    end
  end
end

What’s Next

• I’d love to hear about a better approach to this so feel free to @ me or message me on my socials.
• I implemented Native Google OAuth on the Android app and I’ll be following up with a post about that.
• I recently released Calendar Vision so check that out if you’ve ever struggled with adding events to your calendar.

Upload your images

You can upload a photo you took or take a screenshot and add the event in it to your calendar.

Send in your emails

You can send an email to the Calendar Vision email address and the events in the email will be extracted from the email.

Scrape web pages (Coming Soon)

Soon you’ll be able to share a web page with Calendar Vision and we’ll scrape the site and extract events from the site.

What’s next

It’s been a lot of fun building this app and I’ve learned a lot about Hotwire Native along the way. I’m planning on writing a couple more posts to share what I’ve learned. Stay tuned!

module DaisyUiPagyHelper
  def pagy_daisy_ui_nav(pagy, pagy_id: nil, link_extra: '', **vars)
    p_id   = %( id="#{pagy_id}") if pagy_id
    p_prev = pagy.prev
    p_next = pagy.next

    html = +%(<nav#{p_id} class="btn-group">)
    html << if p_prev
              %(<a class="btn" href="#{pagy_url_for(pagy, p_prev, html_escaped: true)}" aria-label="previous" #{link_extra}>#{pagy_t('pagy.nav.prev')}</a> )
            else
              %(<a class="btn btn-disabled" #{link_extra}>#{pagy_t('pagy.nav.prev')}</a> )
            end
    pagy.series(**vars).each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
      html << case item
              when Integer then %(<a class="btn" href="#{pagy_url_for(pagy, item, html_escaped: true)}" #{link_extra}>#{item}</a> )
              when String  then %(<a class="btn btn-active" #{link_extra}>#{pagy.label_for(item)}</a> )
              when :gap    then %(<a class="btn btn-disabled" #{link_extra}>#{pagy_t('pagy.nav.gap')}</a> )
              else raise InternalError, "expected item types in series to be Integer, String or :gap; got #{item.inspect}"
              end
    end
    html << if p_next
              %(<a class="btn" href="#{pagy_url_for(pagy, p_next, html_escaped: true)}" aria-label="next" #{link_extra}>#{pagy_t('pagy.nav.next')}</a>)
            else
              %(<a class="btn btn-disabled" #{link_extra}>#{pagy_t('pagy.nav.next')}</a>)
            end
    html << %(</nav>)
  end
end

Here’s what it looks like.

Mike’s BBQ

Ranking: 1

My Order: Brisket Cheesesteak, Cooper Sharp Wiz, Raw Onions with a side of homemade potato chips

This is my favorite cheesesteak in the city right now. It’s not exactly traditional since it uses brisket instead of rib eye but their brisket is great. They also have traditional BBQ food there so you can get some of that as well. The biggest downside is their hours. They are only open from noon to 5pm and they will close early if they sell out. They don’t have much seating and the surrounding area is pretty residential so I would recommend ordering pick up and being flexible with where you eat it.

I attended RailsConf this past April in Phoenix. It was held the week of April 25th. This is a post about my favorite talks of the conference.

Opening Keynote - @dhh

DHH did the opening keynote and did not disappoint. He talked about how developers choose technologies for their projects. He felt that developers are more likely to base their decisions on the communities they already belong to rather than because they’ve evaluated it in comparison with others and it is the best fit for their project. He then compared this idea to the belief systems in religions.

If there’s one talk you watch from the conference, I think this should be it. Regardless of whether you agree with him, it was both entertaining and informative.

Talk Video

Goldilocks and the Three Code Reviews - @vaidehijoshi

Vaidehi’s talk about code reviews really resonated with me. I’ve been doing code reviews as a formal process for the last 4 years and I’ve yet to find a good way to summarize what the purpose of code reviews are… until I saw Vaidehi’s talk.

The part that stuck with me was her statement that code reviews should be about “defect detection, not correction.” Code reviews can become contentious and focusing on defects removes a lot of subjectivity from code reviews.

If you’ve struggled with code reviews yourself on on your team, I recommend watching her talk. You can also read more about the research she did for this talk at bettercode.reviews.

Adding Functionality to your Ruby Code

Many programmers start out with languages that favor procedural programming. Because of this, it is tempting to use procedural constructs (while and .each loops) when writing an algorithm in Ruby, even though there may be clearer ways to express the algorithm. This blog post will describe several problems, and compare a procedural implementation and a functional implementation.

Overview

Let’s start with some definitions and a simple example. The example we will use below is the common, but simple, problem of summing a list of numbers. We begin with a list of numbers and the result is the number that is equal to adding all elements of the list together.

Procedural programming

Procedural programming uses a list of instructions to tell the computer what to do step-by-step — http://study.com/academy/lesson/object-oriented-programming-vs-procedural-programming.html

A procedural implementation to sum a list of numbers would look something like this.

sum = 0
[1, 2, 3].each do |number|
  sum += number
end

We start out by initializing a local variable to keep track of the sum. We then iterate through the list of numbers and add each number to the sum.

Functional programming

Functional programming is a programming paradigm … that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data — https://en.wikipedia.org/wiki/Functional_programming

A functional implementation for the list summation problem would be to “reduce” the list by adding each number to an accumulator.

sum = [1, 2, 3].reduce(0) do |sum, number|
  sum + number
end

The difference between the two implementations is that functional programming does not require the sum variable to be altered as the algorithm progresses.

This is a very simple example, so it might not be clear yet what the advantages are of a functional approach. Let’s look at a more complicated example to see how functional and procedural programming compare in a practical application.

Free Item Discount Example

Background

Discounts are essential on ecommerce websites, and WebLinc’s platform supports many different kinds. One of the more popular discounts is the free item discount. The specific free item discount we will discuss is a “Buy 2 of X and/or Y, Get 1 Z”. The discount can be stated more generically as “Buy N from a list of products and Get 1 of the free product”.

Implementation Overview

A discount is applied to a cart which is a collection of items. We will represent an item in the cart with this item class.

Item = Struct.new(:product_id, :quantity)

A real cart item has many more fields (price, product name), but for this example we will only focus on the product ID and the quantity. The product ID will be used to represent the X, Y and Z in “Buy 2 of X and/or Y Get 1 Z”. The quantity is necessary because multiples of the same product can contribute to the discount.

Each implementation of the free item discount will conform to the following abstract class.

class FreeItemDiscount
 
  # @param free_item_product_id
  #   Product ID for the Free Item
  #
  # @param product_ids
  #   The Product IDs that qualify for the discount
  #
  # @param quantity
  #   The quantity of product_ids that must be in the list of items
  #     in order to qualify for the discount
  #

  def initialize(free_item_product_id, product_ids, quantity)
    @free_item_product_id = free_item_product_id
    @product_ids = product_ids
    @quantity = quantity
  end

  def free_item(items: [])
    raise "#{self.class.to_s} must implement #free_item"
  end

  def qualifies?(items: [])
    raise "#{self.class.to_s} must implement #qualifies?"
  end

  private

  def item_qualifies?(item)
    @product_ids.include?(item.product_id)
  end

end

In addition to the two abstract methods free_item and qualifies?, we define a helper method, item_qualifies?, which is used in each implementation. This method returns true if the item’s product ID is in the list of the discount’s eligible product IDs. We will focus our discussion on the implementation of qualifies?.

Procedural Implementation

The procedural implementation of qualifies? creates two local variables to keep track of whether or not the discount qualifies (does_qualify), and the quantity of items that qualify for the discount (quantity_of_qualifying_items)

While iterating through the items we check to see if the item qualifies for the discount. If the item does qualify for the discount, we increment the quantity_of_qualifying_items counter by the quantity of that item. Once we have the updated quantity_of_qualifying_items, we check to see if that quantity is greater than the quantity of items needed to qualify for the discount. If this quantity is greater, the cart qualifies for the discount and we can stop iterating.

class ProceduralFreeItemDiscount < FreeItemDiscount

  def qualifies?(items: [])
    does_qualify = false
    quantity_of_qualifying_items = 0
    items.each do |item|
      if item_qualifies?(item)
        quantity_of_qualifying_items += item.quantity
      end

      if quantity_of_qualifying_items >= quantity_needed_per_discount
        does_qualify = true
        break
      end
    end
    does_qualify
  end

  private

  def quantity_needed_per_discount
    @quantity
  end 

end

Functional Implementation

The functional implementation of qualifies? checks to see if the discountable_quantity is greater than 0. The discountable_quantity is equal to the number_of_qualifying_items in the cart divided by the discount’s eligible quantity. We calculate the number_of_qualifying_items by adding together the quantity of all qualifying items.

class FunctionalFreeItemDiscount < FreeItemDiscount

  def qualifies?(items: [])
    discountable_quantity(items) > 0
  end
  private

  def discountable_quantity(items)
    number_of_qualifying_items(items) / @quantity
  end

  def number_of_qualifying_items(items)
    qualifying_items(items).sum(&:quantity)
  end

  def qualifying_items(items)
    items.select do |item|
      item_qualifies?(item)
    end
  end

end

Comparison of Implementations

The procedural and functional approaches implement the same method and return the same results, but the code is quite different. The procedural implementation modifies several state variables while iterating through the list of items, and it will break when it determines that it qualifies for the discount. The functional implementation does not use any state variables and, at each step of the algorithm, returns an object (either an integer or an array).

The advantage of the procedural implementation is that it takes a step-by-step approach that is intuitive for many developers. However, it is difficult to understand each step independent of each other since each step of the algorithm requires something being done before it.

The functional implementation steps are easier to distinguish from one another since they are separate methods. The code is self-documenting with method names. The code is easier to debug since you can use a single method call to evaluate the result at each step.

Recommendations

It is important to remember that each approach is useful in different situations. One approach that I’ve been successful with is starting out by implementing an algorithm procedurally. This is often the most intuitive way to write the algorithm, especially if you are following test-driven development. After finishing the implementation, I try out a functional approach. I’ve found that when I am returning to look at my own code, or reading someone else’s, it is easier to read and re-use functional code.

See GitHub for source code of the discounts used in this post.

“Entrepreneurship for Engineers” by Bryan Helmkamp

The creator of Code Climate gave a talk on starting a business as an engineer. He discussed the various kinds of businesses an engineer could start (freelance, B2B (business to business), B2C (business to consumer), social networks, etc.) and the level of difficulty with finding customers (freelancing being on the easier end and social networks being on the higher end of the spectrum). His recommendation? Build a B2B service and find 150 customers who will pay $67/month.

“The Metaphysics of Strings” by Greg Gates

In Rails, any Strings have there HTML escaped unless they are marked as HTML safe. The #html_safe method is responsible for marking a String as HTML safe. Greg talked about how this method can produce strange results when concatenating safe and non-safe strings.

His first example showed that a safe string and a non-safe string are considered equal.

irb(main):001:0> require 'action_view'
=> true
irb(main):002:0> safe_string = "I am a string".html_safe
=> "I am a string"
irb(main):003:0> not_safe_string = "I am a string"
=> "I am a string"
irb(main):004:0> safe_string == not_safe_string
=> true
irb(main):005:0> not_safe_string == safe_string
=> true

His second example showed that, even though strings of equal contents were equal regardless of safe-ness, the order in which they were concatenated determined if the resulting string was considered safe.

irb(main):001:0> require 'action_view'
=> true
irb(main):002:0> safe_string = "Safe String".html_safe
=> "Safe String"
irb(main):003:0> not_safe_string = "Not Safe String"
=> "Not Safe String"
irb(main):004:0> (safe_string + not_safe_string).html_safe?
=> true
irb(main):005:0> (not_safe_string + safe_string).html_safe?
=> false

“Generative Testing for Better Code” by Jessica Kerr

This was the final talk of the conference and the organizers couldn’t have picked a better talk to end with. Generative testing, instead of example-based testing, uses randomized inputs and then after application is run with these randomized input verifies that a set of properties hold true. In a standard example-based test, the input would be fixed (the same every time the test is run) and the expected behavior would be well-defined. Generative testing is a little more difficult since the input is not determined until the test is run and it may be difficult to know the expected behavior when writing the test.

From her abstract:

The goal of Generative Testing is to carefully define every possible input, then let the framework run hundreds of scenarios through the same test. It means thinking about more than a few examples, and deciding what the code should do in every possible situation.

Even though Generative Testing is more mature in other languages, she gave some examples in Ruby using the library rantly. This repository has some examples she went through during the talk https://github.com/jessitron/venn.

After the conference

I had a lot of fun at my first Ruby conference and I am looking forward to attending more in the future. I definitely would recommend this conference to anyone in the future. They have a great Ruby community in Pittsburgh and they put a lot of time and effort into making it a great weekend for those who attended.

Here are my highlights from the first day:

“JRuby: The Best Parts” by Charles Nutter

I knew a little about JRuby before the conference, but this talk by the creator of the implementation, gave me a lot of insight into the reasons someone would choose it over MRI. The first “best part” that stuck out to me was that the virtual machine it uses (the Java Virtual Machine) is more mature than any other virtual machine since it has been optimized over the years. The second “best part” was that JRuby utilizes Java threads and can run multiple threads concurrently unlike MRI. He also highlighted two common complaints with JRuby: slow startup and lack of C-extensions. He addressed slow startup by suggestion a tool called drip that preloads new JVM instances. There was an experiment at adding support for C-extensions but there were too many issues with it.

“Utils is a Junk Drawer” by Franklin Weber

Franklin talked a lot about util classes that could be utilized across projects. The example that stuck out the most to me was from Rake.

# from https://github.com/jimweirich/rake/blob/master/lib/rake/ext/string.rb
class String
  rake_extension("ext") do
    def ext(newext='')
      ...
    end
  end
end

# from https://github.com/jimweirich/rake/blob/master/lib/rake/ext/core.rb
class Module
  def rake_extension(method)
    if method_defined?(method)
      $stderr.puts "WARNING: Possible conflict with Rake extension: " +
        "#{self}##{method} already exists"
    else
      yield
    end
  end
end

The idea behind this code is to a rake_extension call around a core method that you are redefining to notify the developer if the method has already been created by another Gem.

“Better Coding with Ruby Lambdas” by Keith Bennett

Keith talked about the various uses of lambda’s and how they are under-utilized when compared to normal methods. I particularly liked his use of lambdas to create “inner methods”. This technique reminds me a lot of Scala inner methods. When a method needs to call several other function, instead of creating private methods, local lambdas can be created.

# from https://github.com/keithrbennett/ruby-lambdas-presentation-notes/blob/master/inner_functions__lambdas.rb
class SampleUsingLambdas

  def task_1

    validate_inputs = ->() do
      ...
    end

    perform = ->() do
      ...
    end

    cleanup = ->() do
      ...
    end

    validate_inputs.()
    perform.()
    cleanup.()
  end
end

# instead of

class SampleUsingLambdas

  def task_1
    validate_inputs
    perform
    cleanup
  end

  private

  def validate_inputs
    ...
  end

  def perform
    ...
  end

  def cleanup
    ...
  end
end

After the talks

After the talks were over for the day, we headed to the conference reception at PNC Park (where the Pittsburgh Pirates play). They had great food and a great view waiting for us.

(see Steel City Ruby ‘14 - Part 2 for my thoughts on the second day of the conference)