Logo doesn’t show properly on iOS Auth0 Login page

[ketanPRO]

Description

We are using logo image of 108x58 size for logo on iOS auth0 login page. But it doesn’t work properly on all devices. iphone 8 plus & iphone se it gets stretched & doesntt show properly.

• The use case or overall problem you're trying to solve
• Information about when the problem started

Prerequisites

• [ ] Did you check the documentation? https://auth0.com/docs/libraries/lock-ios/v2/customization
• [ ] Did you check the Auth0 Community? Yes
• [ ] Are you reporting this to the correct repository? Yes
• [ ] Are there any related or duplicate Issues or PRs for this issue? No

Environment

Please provide the following:

• Lock version 11
• iOS version. Any All devices doesnt' show logo properly. E.g. iPhone 8, 8 plus, se doesn't show logo properly.
• If using Carthage or CocoaPods, please include your Cartfile or Podfile
• Xcode version

Reproduction

Detail the steps taken to reproduce this error and note if this issue can be reproduced consistently or if it is intermittent.

Please include:

• Application settings (redact/remove sensitive information)
• Lock.swift log information and HTTP request traces. Remember to obfuscate sensitive information.
• Code snippet or sample project that reproduces the bug
• Screenshots when appropriate

[cocojoe]

Please can you include information the information asked for such as version of Xcode etc

Also please provide:

• A code snippet of how you are applying the style changes.
• How the image was configured in your image assets.

I quickly imported the largest image you provided and tried it as a @1x @2x @3x ? I didn't experience your result.

My personal advice here is it's much easier to use a vector. If you can export a vector to PDF then your logo will always be universal.

[ketanPRO]

Hi, we are using xcode 10.1

Below is code snippet.

Lock
                .classic()
                .withOptions {
                    $0.closable = true
                    $0.parameters = ["c":strCompanyId]
                    switch initialLoginScreen {
                        case .login: $0.initialScreen = .login
                        case .signup: $0.initialScreen = .signup
                        case .resetPassword: $0.initialScreen = .resetPassword
                    }
                }
                .withStyle {
                    // style.
                    $0.logo = LazyImage(name: "AppIconLogin")
                    $0.title = ""
                    $0.backgroundColor = UIColor.white
                    $0.headerColor = UIColor.white
                    $0.titleColor = UIColor.black
                    $0.secondaryButtonColor = UIColor.black
                    $0.buttonTintColor = UIColor.white

                    $0.tabTextColor = UIColor.black
                    $0.tabTintColor = UIColor(hex6: 0xF00886) //UIColor.black

                    $0.primaryColor = UIColor.black //(hex6: 0xED1D1D)

                }
                .onAuth { credentials in
                    // Let's save our credentials.accessToken value
                    print("Authentication is successful")
                    print(credentials)
                    if let accessToken = credentials.accessToken {
                        Auth0SessionManager.shared.storeTokens(accessToken, refreshToken: credentials.refreshToken)
                    }
                    Auth0SessionManager.shared.retrieveProfile { error in
                        DispatchQueue.main.async {
                            if let strClientToken = Auth0SessionManager.shared.profile?.customClaims?["spotlight"] as? String {
                                    // Login successful
                                //print(userInfoProfile)
                            } else {
                                self.showMissingClientTokenAlert()
                                completion(false)
                            }
                        }
                    }
                }
                .onError(callback: { (error) in
                    // error
                    DispatchQueue.main.async {
                        self.showMissingClientTokenAlert()
                        completion(false)
                    }
                })
                .onCancel(callback: { 
                    // cancelled.
                    DispatchQueue.main.async {
                        completion(false)
                    }
                })
                .present(from: sourceViewController)

Below is the screenshot how Image is configured.

Also Note that, This implementation was working fine with older version of xcode & Lock. We updated our code for latest xcode, swift & Lock library. After that only we are facing this issue.

Unfortunately, We don't have Vector version of Logo.

[cocojoe]

When you say update versions, please add some context. What changed exactly, what version etc Thanks

I tried your images as @1x, @2x, @3x with iPhone 8 with the following snippet. Xcode 10.1

.withStyle {
                        $0.logo = LazyImage(name: "logo")
}

[ketanPRO]

After removing $0.title = "" it works fine. so closing issue.