Set up Amplify Auth

Amplify Auth is powered by Amazon Cognito. Cognito is a robust user directory service that handles user registration, authentication, account recovery, and other operations. Review the concepts to learn more.

To get started with defining your authentication resource, open or create the auth resource file:

amplify/auth/resource.ts
import { defineAuth } from "@aws-amplify/backend"
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
export const auth = defineAuth({
  loginWith: {
    email: true,

By default, your auth resource is scaffolded using email as the default login mechanism. You can also configure your auth resource to allow signing in with phone numbers or an external provider such as Google, Facebook, Amazon, or Sign in with Apple.

Note: At a minimum you will need to pass a loginWith value to set up how your users sign in to your app. Signing in with email and password is configured by default if you do not provide any value.

Deploy auth resource

After you have chosen and defined your authentication resource, run the following command to create your resource in your personal cloud sandbox.

Be sure to add a "raw" folder under app/src/main/res directory if it does not exist.

Terminal

npx ampx sandbox --outputs-out-dir <path_to_app/src/main/res/raw>

After a successful deployment, this command also generates an outputs file (amplify_outputs.json) to enable your frontend app to connect to your backend resources. The values you configure in your backend authentication resource are set in the generated outputs file to automatically configure the frontend Authenticator connected component.

Connect your application code to your auth resource

Creating and correctly implementing the sign-in flow can be challenging and time-consuming. Amplify's Authenticator UI component streamlines this by enabling you to rapidly build the entire authentication flow for your app. The component works seamlessly with configuration in amplify/auth/resource.ts to automatically connect with your backend resources.

Amplify has pre-built UI components for React, Vue, Angular, React Native, Swift, Android, and Flutter. In this guide, we are focusing on those for web applications.

Be sure to have compileSdk version as 34 or higher.

The Authenticator component is built using Jetpack Compose. Enable Jetpack Compose by adding the following to the android section of your app's build.gradle file:

app/build.gradle.kts
compileOptions {
    // Support for Java 8 features
    isCoreLibraryDesugaringEnabled = true
    sourceCompatibility = JavaVersion.VERSION_1_8
    targetCompatibility = JavaVersion.VERSION_1_8
}
buildFeatures {
    compose = true
}
composeOptions {
  kotlinCompilerExtensionVersion = "1.2.0"
}
dependencies {
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.3")
}

Add the following dependencies to your app's build.gradle.kts file and click "Sync Now" when prompted:

app/build.gradle.kts
dependencies {
    implementation("com.amplifyframework.ui:authenticator:ANDROID_AUTHENTICATOR_VERSION")

Before calling the Amplify.configure function, make sure to either download the amplify_outputs.json file from the console, or generate it with the following command:

Terminal

npx ampx generate outputs --app-id <app-id> --branch main --out-dir app/src/main/res/raw

Next, be sure the file you generated or downloaded is in the appropriate resource directory for your application (for example, app/src/main/res/raw) in your Android project. Otherwise, you will not be able to compile your application.

MyAmplifyApp.kt
import android.app.Application
import android.util.Log
import com.amplifyframework.AmplifyException
import com.amplifyframework.auth.cognito.AWSCognitoAuthPlugin
import com.amplifyframework.core.Amplify
import com.amplifyframework.core.configuration.AmplifyOutputs
class MyAmplifyApp: Application() {
    override fun onCreate() {
        super.onCreate()
        try {
            Amplify.configure(AmplifyOutputs(R.raw.amplify_outputs), applicationContext)
            Log.i("MyAmplifyApp", "Initialized Amplify")
        } catch (error: AmplifyException) {
            Log.e("MyAmplifyApp", "Could not initialize Amplify", error)

Lastly, update your MainActivity.kt file to use the Amplify UI components:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.amplifyframework.core.Amplify
import com.amplifyframework.ui.authenticator.ui.Authenticator
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAmplifyAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                        Column {
                                text = "Hello ${state.user.username}!",
                            Button(onClick = {
                                Text(text = "Sign Out")

Once you add the Authenticator component to your app, you can test the sign-up, sign-in, and sign-out functionality. You can also customize the Authenticator connected component to adjust colors and styling as needed.

Next steps

Now that you have completed setting up authentication in your Amplify app with email and password, you may also want to add some additional features. We recommend you learn more about:

Concepts