This project contains the implementation of an OTP (One-Time Password) screen using plain SwiftUI.
Here's a screenshot of the OTP screen in action:
![OTP Screen Example](https://private-user-images.githubusercontent.com/71021935/333199422-792f1874-73f7-4138-917a-e8b8df70a374.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMTQyMTksIm5iZiI6MTcyNjExMzkxOSwicGF0aCI6Ii83MTAyMTkzNS8zMzMxOTk0MjItNzkyZjE4NzQtNzNmNy00MTM4LTkxN2EtZThiOGRmNzBhMzc0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDA0MDUxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ1N2I0NDJiY2VjNjZhMGE4YjlkMjNiZGRiYTA4YmMxMDM0YzIxYWI3M2NjOWVhNTU2N2MxMzAyNmJlZjVlYzAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.CeXBqh8bUHFiXWy89PqweIy8csVBf4qIWs6XJm2NGXg)
- SwiftUI-based OTP input screen
- Clean and minimal design
- Easy to integrate into any SwiftUI project
Follow these steps to integrate the OTP screen into your project:
-
Clone the repository:
git clone https://github.com/ShivadityaKr/SwiftUI-OTP.git
-
Open the project in Xcode:
Navigate to the project directory and open the
.xcodeproj
file with Xcode.cd SwiftUI-OTP open SwiftUI-OTP.xcodeproj
-
Build and run:
Select your target device or simulator and press
Cmd + R
to build and run the project.
To use the OTP screen in your own SwiftUI project, follow these steps:
-
Copy the OTP screen files:
Copy the necessary files from this project to your own project. These typically include the SwiftUI view and any related files (such as view models or custom components).
-
Add the OTP screen to your view hierarchy:
Add the OTP screen view to your existing view hierarchy where you need the OTP input functionality.
import SwiftUI struct ContentView: View { @State var otpText = "" var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundStyle(.tint) Text("OTP Screen") AppOtpView(otpText: $otpText) { value in print(value) } .padding(.top, 10) } .padding() } } #Preview { ContentView() }
-
Customize as needed:
Customize the OTP screen to fit the design and requirements of your application. This may include modifying the appearance, handling different OTP lengths, or integrating with your backend for OTP verification.
- Xcode 12 or later
- iOS 14.0 or later
This project is licensed under the MIT License. See the LICENSE file for more details.
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
For any questions or suggestions, feel free to open an issue on the GitHub repository.
By ShivadityaKr