Tugas 11 Yusuf Hasan Nazila - 5025211225

Implementasi Autentikasi OTP di Android dengan Jetpack Compose

Selamat datang! Pada tutorial kali ini, kita akan membahas cara membuat sistem autentikasi pengguna yang modern menggunakan nomor telepon dan OTP (One-Time Password) di aplikasi Android. Proyek ini dibangun sepenuhnya dengan Jetpack Compose untuk UI dan menggunakan logika simulasi untuk proses OTP, sehingga cocok untuk pembelajaran dan pengembangan awal tanpa bergantung pada layanan eksternal seperti Firebase.

Aplikasi ini menyediakan dua alur utama: Login untuk pengguna yang sudah ada dan Sign Up untuk pengguna baru.

Struktur dan Fitur Utama

Berikut adalah rincian fungsionalitas utama yang diimplementasikan dalam proyek ini:

1. Halaman Awal (Welcome Screen)

Saat aplikasi pertama kali dibuka, pengguna akan disambut oleh halaman yang memberikan dua pilihan jelas: masuk ke akun yang sudah ada atau membuat akun baru.

Fungsi Kode:

WelcomeScreen adalah Composable sederhana yang berisi dua tombol untuk navigasi ke halaman Login atau Sign Up.

// File: app/src/main/java/com/example/tugas11/AuthScreen.kt

@Composable
fun WelcomeScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Selamat Datang!", style = MaterialTheme.typography.headlineMedium)
        Spacer(modifier = Modifier.height(32.dp))
        Button(onClick = { navController.navigate(AppRoutes.LOGIN) }) {
            Text("Login")
        }
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { navController.navigate(AppRoutes.SIGN_UP) }) {
            Text("Sign Up")
        }
    }
}
    

2. Halaman Sign Up (Pendaftaran)

Pengguna baru dapat mendaftarkan akun menggunakan nomor telepon. Aplikasi akan memvalidasi apakah nomor tersebut sudah terdaftar atau belum. Jika belum, aplikasi akan mengirimkan OTP (simulasi).

Fungsi Kode:

SignUpScreen menangkap input nomor telepon dari pengguna. Logika di MainActivity kemudian memeriksa apakah nomor tersebut sudah ada di registeredPhoneNumbers. Jika belum, fungsi sendMockOtp() dipanggil.

// File: app/src/main/java/com/example/tugas11/MainActivity.kt

// ...
onSendOtp = { phoneNumber, isLogin ->
    isLoginFlow = isLogin
    currentPhoneNumber = phoneNumber
    if (isLogin) {
        // ... Logika Login
    } else {
        // Alur Sign Up
        if (registeredPhoneNumbers.contains(phoneNumber)) {
            Toast.makeText(this, "Nomor sudah terdaftar. Silakan Login.", Toast.LENGTH_LONG).show()
            false // Tetap di layar Sign Up
        } else {
            sendMockOtp()
            true // Lanjut ke layar OTP
        }
    }
},
// ...
    

3. Halaman Login

Pengguna yang sudah terdaftar dapat masuk menggunakan nomor telepon mereka. Sama seperti pendaftaran, aplikasi akan memvalidasi nomor dan mengirimkan OTP jika nomor tersebut valid.

Fungsi Kode:

Logika untuk Login memeriksa apakah nomor telepon yang dimasukkan pengguna ada di dalam set registeredPhoneNumbers. Jika ya, OTP akan dikirim.

// File: app/src/main/java/com/example/tugas11/MainActivity.kt

// ...
onSendOtp = { phoneNumber, isLogin ->
    // ...
    if (isLogin) {
        // Alur Login
        if (registeredPhoneNumbers.contains(phoneNumber)) {
            sendMockOtp()
            true // Lanjut ke layar OTP
        } else {
            Toast.makeText(this, "Nomor tidak terdaftar. Silakan Sign Up.", Toast.LENGTH_LONG).show()
            false // Tetap di layar Login
        }
    } else {
        // ... Logika Sign Up
    }
},
// ...
    

4. Halaman Verifikasi OTP

Setelah OTP (simulasi) dikirim, pengguna akan diarahkan ke halaman ini untuk memasukkan 6 digit kode yang ditampilkan melalui Toast. Jika kode benar, pengguna akan diarahkan ke halaman utama (Home).

Fungsi Kode:

Fungsi sendMockOtp() menghasilkan angka acak 6 digit dan menampilkannya dalam Toast. Fungsi onVerifyOtp membandingkan input pengguna dengan OTP yang disimpan. Jika berhasil dan merupakan alur pendaftaran, nomor telepon akan ditambahkan ke "database".

// File: app/src/main/java/com/example/tugas11/MainActivity.kt

private fun sendMockOtp() {
    mockOtp = (100000..999999).random().toString()
    Toast.makeText(this, "KODE OTP ANDA: $mockOtp", Toast.LENGTH_LONG).show()
}

// ...
onVerifyOtp = { enteredOtp ->
    if (enteredOtp == mockOtp) {
        // Jika ini adalah alur sign up, tambahkan nomor ke 'database'
        if (!isLoginFlow) {
            currentPhoneNumber?.let { registeredPhoneNumbers.add(it) }
        }
        Toast.makeText(this, "Verifikasi Berhasil!", Toast.LENGTH_SHORT).show()
        true // Sukses
    } else {
        Toast.makeText(this, "Kode OTP Salah!", Toast.LENGTH_SHORT).show()
        false // Gagal
    }
}
// ...
    

---

Kode Sumber

Seluruh kode sumber untuk proyek ini tersedia di repositori GitHub. Jangan ragu untuk melakukan clone, fork, atau memberikan bintang jika menurut Anda proyek ini bermanfaat.

GitHub Repository: https://github.com/hnazila71/Tugas-11-PPB.git