Build a custom flow for authenticating with enterprise connections

'use client'

import * as React from 'react'
import { useSignIn } from '@clerk/nextjs'

export default function Page() {
  const { signIn, isLoaded } = useSignIn()

  const signInWithEnterpriseSSO = (e: React.FormEvent) => {
    e.preventDefault()

    if (!isLoaded) return null

    const email = (e.target as HTMLFormElement).email.value

    signIn
      .authenticateWithRedirect({
        identifier: email,
        strategy: 'enterprise_sso',
        redirectUrl: '/sign-in/sso-callback',
        redirectUrlComplete: '/',
      })
      .then((res) => {
        console.log(res)
      })
      .catch((err: any) => {
        // See https://clerk.com/docs/guides/development/custom-flows/error-handling
        // for more info on error handling
        console.log(err.errors)
        console.error(err, null, 2)
      })
  }

  return (
    <form onSubmit={(e) => signInWithEnterpriseSSO(e)}>
      <input id="email" type="email" name="email" placeholder="Enter email address" />
      <button>Sign in with Enterprise SSO</button>
    </form>
  )
}

import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'

export default function Page() {
  // Handle the redirect flow by calling the Clerk.handleRedirectCallback() method
  // or rendering the prebuilt <AuthenticateWithRedirectCallback/> component.
  // This is the final step in the custom Enterprise SSO flow.
  return <AuthenticateWithRedirectCallback />
}

    import android.util.Log
    import androidx.lifecycle.ViewModel
    import androidx.lifecycle.viewModelScope
    import com.clerk.api.Clerk
    import com.clerk.api.network.serialization.errorMessage
    import com.clerk.api.network.serialization.onFailure
    import com.clerk.api.network.serialization.onSuccess
    import com.clerk.api.signin.SignIn
    import com.clerk.api.signup.SignUp
    import com.clerk.api.sso.ResultType
    import kotlinx.coroutines.flow.MutableStateFlow
    import kotlinx.coroutines.flow.asStateFlow
    import kotlinx.coroutines.flow.combine
    import kotlinx.coroutines.flow.launchIn
    import kotlinx.coroutines.launch

    class EnterpriseSSOViewModel : ViewModel() {
        private val _uiState = MutableStateFlow<UiState>(UiState.Loading)
        val uiState = _uiState.asStateFlow()

        init {
            combine(Clerk.isInitialized, Clerk.userFlow) { isInitialized, user ->
                _uiState.value = when {
                    !isInitialized -> UiState.Loading
                    user != null -> UiState.Authenticated
                    else -> UiState.SignedOut
                }
            }.launchIn(viewModelScope)
        }

        fun signInWithEnterpriseSSO(email: String) {
            viewModelScope.launch {
                Clerk.auth.signInWithEnterpriseSso { this.email = email }.onSuccess {
                    // Enterprise SSO can complete as either a sign-in or sign-up.
                    when (it.resultType) {
                        ResultType.SIGN_IN -> {
                            if (it.signIn?.status == SignIn.Status.COMPLETE) {
                                _uiState.value = UiState.Authenticated
                            } else {
                                // If the status is not complete, check why. User may need to
                                // complete further steps.
                            }
                        }
                        ResultType.SIGN_UP -> {
                            if (it.signUp?.status == SignUp.Status.COMPLETE) {
                                _uiState.value = UiState.Authenticated
                            } else {
                                // If the status is not complete, check why. User may need to
                                // complete further steps.
                            }
                        }
                    }
                }.onFailure {
                    // See https://clerk.com/docs/guides/development/custom-flows/error-handling
                    // for more info on error handling
                    Log.e("EnterpriseSSO", it.errorMessage, it.throwable)
                }
            }
        }

        sealed interface UiState {
            data object Loading : UiState

            data object SignedOut : UiState

            data object Authenticated : UiState
        }
    }

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle

class EnterpriseSSOActivity : ComponentActivity() {
    private val viewModel: EnterpriseSSOViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val state by viewModel.uiState.collectAsStateWithLifecycle()
            var email by remember { mutableStateOf("") }

            Column(
                modifier = Modifier.fillMaxSize().padding(24.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                when (state) {
                    EnterpriseSSOViewModel.UiState.Authenticated -> Text("Authenticated")
                    EnterpriseSSOViewModel.UiState.Loading -> CircularProgressIndicator()
                    EnterpriseSSOViewModel.UiState.SignedOut -> {
                        TextField(
                            value = email,
                            onValueChange = { email = it },
                            label = { Text("Work email") }
                        )
                        Button(
                            modifier = Modifier.padding(top = 12.dp),
                            enabled = email.isNotBlank(),
                            onClick = { viewModel.signInWithEnterpriseSSO(email) }
                        ) {
                            Text("Sign in with Enterprise SSO")
                        }
                    }
                }
            }
        }
    }
}