Build a custom flow for authenticating with OAuth connections

'use client'

import { OAuthStrategy } from '@clerk/shared/types'
import { useSignIn } from '@clerk/nextjs'

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

  const signInWith = async (strategy: OAuthStrategy) => {
    const { error } = await signIn.sso({
      strategy,
      redirectCallbackUrl: '/sso-callback',
      redirectUrl: '/sign-in/tasks', // Learn more about session tasks at https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
    })
    if (error) {
      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
      // for more info on error handling
      console.error(JSON.stringify(error, null, 2))
      return
    }

    if (signIn.status === 'needs_second_factor') {
      // See https://clerk.com/docs/guides/development/custom-flows/authentication/multi-factor-authentication
    } else if (signIn.status === 'needs_client_trust') {
      // See https://clerk.com/docs/guides/development/custom-flows/authentication/client-trust
    } else {
      // Check why the sign-in is not complete
      console.error('Sign-in attempt not complete:', signIn)
    }
  }

  // Render a button for each supported OAuth provider
  // you want to add to your app. This example uses only Google.
  return (
    <>
      <button onClick={() => signInWith('oauth_google')}>Sign in with Google</button>
      {/* For your debugging purposes. You can just console.log errors, but we put them in the UI for convenience */}
      {errors && <p>{JSON.stringify(errors, null, 2)}</p>}
    </>
  )
}

'use client'

import { useClerk, useSignIn, useSignUp } from '@clerk/nextjs'
import { useRouter } from 'next/navigation'
import { useEffect, useRef } from 'react'

export default function Page() {
  const clerk = useClerk()
  const { signIn } = useSignIn()
  const { signUp } = useSignUp()
  const router = useRouter()
  const hasRun = useRef(false)

  const navigateToSignIn = () => {
    router.push('/sign-in')
  }

  const finalizeSignIn = async () => {
    await signIn.finalize({
      navigate: async ({ session, decorateUrl }) => {
        // Handle session tasks
        // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
        if (session?.currentTask) {
          console.log(session?.currentTask)
          return
        }

        // If no session tasks, navigate the signed-in user to the home page
        const url = decorateUrl('/')
        if (url.startsWith('http')) {
          window.location.href = url
        } else {
          router.push(url)
        }
      },
    })
  }

  const finalizeSignUp = async () => {
    await signUp.finalize({
      navigate: async ({ session, decorateUrl }) => {
        // Handle session tasks
        // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
        if (session?.currentTask) {
          console.log(session?.currentTask)
          return
        }

        // If no session tasks, navigate the signed-in user to the home page
        const url = decorateUrl('/')
        if (url.startsWith('http')) {
          window.location.href = url
        } else {
          router.push(url)
        }
      },
    })
  }

  useEffect(() => {
    ;(async () => {
      if (!clerk.loaded || hasRun.current) {
        return
      }
      // Prevent Next.js from re-running this effect when the page is re-rendered during session activation.
      hasRun.current = true

      // If this was a sign-in, and it's complete, there's nothing else to do.
      if (signIn.status === 'complete') {
        await finalizeSignIn()
        return
      }

      // If the sign-up used an existing account, transfer it to a sign-in
      if (signUp.isTransferable) {
        await signIn.create({ transfer: true })
        const signInStatus = signIn.status as typeof signIn.status | 'complete'
        if (signInStatus === 'complete') {
          await finalizeSignIn()
          return
        }

        // If sign-in is not complete, additional information is needed
        // For this example, we'll navigate back to the sign-in page assuming that it handles these cases
        return navigateToSignIn()
      }

      if (
        signIn.status === 'needs_first_factor' &&
        !signIn.supportedFirstFactors?.every((f) => f.strategy === 'enterprise_sso')
      ) {
        // The sign-in requires the use of a configured first factor, so navigate to the sign-in page
        return navigateToSignIn()
      }

      // If the sign-in used an external account not associated with an existing user, create a sign-up
      if (signIn.isTransferable) {
        await signUp.create({ transfer: true })
        if (signUp.status === 'complete') {
          await finalizeSignUp()
          return
        }

        // If sign-up is not complete, additional information is needed
        // See https://clerk.com/docs/guides/development/custom-flows/authentication/oauth-connections#handle-missing-requirements
        return router.push('/sign-in/continue')
      }

      // If sign-up is complete, finalize it
      if (signUp.status === 'complete') {
        await finalizeSignUp()
        return
      }

      // If the sign-in requires MFA or a new password
      // For this example, we'll navigate back to the sign-in page assuming that it handles these cases
      if (signIn.status === 'needs_second_factor' || signIn.status === 'needs_new_password') {
        return navigateToSignIn()
      }

      // The external account used to sign-in or sign-up was already associated with an existing user and active
      // session on this client, so activate the session and navigate to the application.
      if (signIn.existingSession || signUp.existingSession) {
        const sessionId = signIn.existingSession?.sessionId || signUp.existingSession?.sessionId
        if (sessionId) {
          // Because we're activating a session that's not the result of a sign-in or sign-up, we need to use the
          // Clerk `setActive` API instead of the `finalize` API.
          await clerk.setActive({
            session: sessionId,
            navigate: async ({ session, decorateUrl }) => {
              // Handle session tasks
              // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
              if (session?.currentTask) {
                console.log(session?.currentTask)
                return
              }

              // If no session tasks, navigate the signed-in user to the home page
              const url = decorateUrl('/')
              if (url.startsWith('http')) {
                window.location.href = url
              } else {
                router.push(url)
              }
            },
          })
          return
        }
      }
    })()
  }, [clerk, signIn, signUp])

  return (
    <div>
      {/* Because a sign-in transferred to a sign-up might require captcha verification, make sure to render the
captcha element. */}
      <div id="clerk-captcha"></div>
    </div>
  )
}

package com.clerk.customflows.oauth

import android.util.Log
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.clerk.api.Clerk
import com.clerk.api.log.ClerkLog
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.OAuthProvider
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 OAuthViewModel : 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 signInWithOAuth(provider: OAuthProvider) {
  viewModelScope.launch {
    Clerk.auth
      .signInWithOAuth(provider)
      .onSuccess {
        when (it.resultType) {
          ResultType.SIGN_IN -> {
            // The OAuth flow resulted in a 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 -> {
            // The OAuth flow resulted in a 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.
            }
          }

          ResultType.UNKNOWN -> {
            ClerkLog.e("Unknown result type after OAuth redirect")
          }
        }
      }
      .onFailure {
        // See https://clerk.com/docs/guides/development/custom-flows/error-handling
        // for more info on error handling
        Log.e("OAuthViewModel", it.errorMessage, it.throwable)
      }
  }
}

sealed interface UiState {
  data object Loading : UiState

  data object SignedOut : UiState

  data object Authenticated : UiState
}
}

package com.clerk.customflows.oauth

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.clerk.api.sso.OAuthProvider

class OAuthActivity : ComponentActivity() {
val viewModel: OAuthViewModel by viewModels()

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContent {
    val state by viewModel.uiState.collectAsStateWithLifecycle()
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
      when (state) {
        OAuthViewModel.UiState.Authenticated -> Text("Authenticated")
        OAuthViewModel.UiState.Loading -> CircularProgressIndicator()
        OAuthViewModel.UiState.SignedOut -> {
          val provider = OAuthProvider.GOOGLE // Or .GITHUB, .SLACK etc.
          Button(onClick = { viewModel.signInWithOAuth(provider) }) {
            Text("Sign in with ${provider.name}")
          }
        }
      }
    }
  }
}
}

package com.clerk.customflows.oauth

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.signup.SignUp
import com.clerk.api.signup.update
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 OAuthContinueSignUpViewModel : 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 -> {
              // `missing_requirements` and `missingFields` exist on the in-progress SignUp
              // (same object as `Clerk.auth.currentSignUp` in the Android SDK).
              when (Clerk.auth.currentSignUp?.status) {
                SignUp.Status.MISSING_REQUIREMENTS -> UiState.CollectMissingFields
                SignUp.Status.COMPLETE -> UiState.Authenticated
                else -> UiState.NotApplicable
              }
            }
          }
      }
      .launchIn(viewModelScope)
  }

  fun submitMissingFields(firstName: String, lastName: String) {
    val signUp = Clerk.auth.currentSignUp ?: return
    if (signUp.status != SignUp.Status.MISSING_REQUIREMENTS) return

    viewModelScope.launch {
      signUp
        .update(
          SignUp.SignUpUpdateParams.Standard(
            firstName = firstName.trim(),
            lastName = lastName.trim(),
          ),
        )
        .onSuccess { updated ->
          when (updated.status) {
            SignUp.Status.COMPLETE -> {
              val sessionId = updated.createdSessionId
              if (sessionId != null) {
                Clerk.auth
                  .setActive(sessionId = sessionId)
                  .onSuccess {
                    // If the session has pending tasks, handle them next.
                    // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
                  }
                  .onFailure {
                    // See https://clerk.com/docs/guides/development/custom-flows/error-handling
                    Log.e("OAuthContinueSignUp", it.errorMessage, it.throwable)
                  }
              }
            }
            SignUp.Status.MISSING_REQUIREMENTS -> {
              Log.d(
                "OAuthContinueSignUp",
                "Still missing: ${updated.missingFields}",
              )
            }
            else -> {
              Log.e(
                "OAuthContinueSignUp",
                "Sign-up not complete: ${updated.status}",
              )
            }
          }
        }
        .onFailure {
          // See https://clerk.com/docs/guides/development/custom-flows/error-handling
          Log.e("OAuthContinueSignUp", it.errorMessage, it.throwable)
        }
    }
  }

  sealed interface UiState {
    data object Loading : UiState

    data object Authenticated : UiState

    /** Show this screen only while `currentSignUp.status == MISSING_REQUIREMENTS`. */
    data object CollectMissingFields : UiState

    /** No in-progress sign-up or status is not missing requirements—navigate elsewhere. */
    data object NotApplicable : UiState
  }
}

package com.clerk.customflows.oauth

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.fillMaxWidth
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.Composable
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 OAuthContinueSignUpActivity : ComponentActivity() {
  private val viewModel: OAuthContinueSignUpViewModel by viewModels()

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      val uiState by viewModel.uiState.collectAsStateWithLifecycle()
      OAuthContinueSignUpScreen(
        uiState = uiState,
        onSubmit = viewModel::submitMissingFields,
      )
    }
  }
}

@Composable
private fun OAuthContinueSignUpScreen(
  uiState: OAuthContinueSignUpViewModel.UiState,
  onSubmit: (String, String) -> Unit,
) {
  var firstName by remember { mutableStateOf("") }
  var lastName by remember { mutableStateOf("") }

  Column(
    modifier =
      Modifier
        .fillMaxSize()
        .padding(24.dp),
    verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically),
    horizontalAlignment = Alignment.CenterHorizontally,
  ) {
    when (uiState) {
      OAuthContinueSignUpViewModel.UiState.Loading -> {
        CircularProgressIndicator()
      }
      OAuthContinueSignUpViewModel.UiState.Authenticated -> {
        Text("Signed in")
      }
      OAuthContinueSignUpViewModel.UiState.NotApplicable -> {
        Text("Nothing to continue.")
      }
      OAuthContinueSignUpViewModel.UiState.CollectMissingFields -> {
        Text("Continue sign-up")
        Text("Add your name to finish creating your account.")
        TextField(
          value = firstName,
          onValueChange = { firstName = it },
          modifier = Modifier.fillMaxWidth(),
          label = { Text("First name") },
          singleLine = true,
        )
        TextField(
          value = lastName,
          onValueChange = { lastName = it },
          modifier = Modifier.fillMaxWidth(),
          label = { Text("Last name") },
          singleLine = true,
        )
        val canSubmit = firstName.isNotBlank() && lastName.isNotBlank()
        Button(
          onClick = { onSubmit(firstName, lastName) },
          enabled = canSubmit,
        ) {
          Text("Continue")
        }
      }
    }
  }
}