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:
1import { defineAuth } from "@aws-amplify/backend"2
3/**4 * Define and configure your auth resource5 * @see https://docs.amplify.aws/gen2/build-a-backend/auth6 */7export const auth = defineAuth({8 loginWith: {9 email: true,10 },11})
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.
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.
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.
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:
compileOptions { // Support for Java 8 features coreLibraryDesugaringEnabled true sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8}buildFeatures { compose true}composeOptions { kotlinCompilerExtensionVersion '1.2.0'}
Add the following dependencies to your app's build.gradle
file and click "Sync Now" when prompted:
1dependencies {2 implementation("com.amplifyframework.ui:authenticator:ANDROID_AUTHENTICATOR_VERSION")3 coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.3")4}
1dependencies {2 dependencies {3 // Authenticator dependency4 implementation 'com.amplifyframework.ui:authenticator:ANDROID_AUTHENTICATOR_VERSION'5
6 // Support for Java 8 features7 coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:2.0.3'8 }9}
1import android.app.Application2import android.util.Log3import com.amplifyframework.AmplifyException4import com.amplifyframework.auth.cognito.AWSCognitoAuthPlugin5import com.amplifyframework.core.Amplify6import com.amplifyframework.core.configuration.AmplifyOutputs7
8class MyAmplifyApp: Application() {9 override fun onCreate() {10 super.onCreate()11
12 try {14 Amplify.configure(AmplifyOutputs(R.raw.amplify_outputs), applicationContext)15 Log.i("MyAmplifyApp", "Initialized Amplify")16 } catch (error: AmplifyException) {17 Log.e("MyAmplifyApp", "Could not initialize Amplify", error)18 }19 }20}
Lastly, update your MainActivity.kt file to use the Amplify UI components:
1import android.os.Bundle2import androidx.activity.ComponentActivity3import androidx.activity.compose.setContent4import androidx.compose.foundation.layout.Column5import androidx.compose.foundation.layout.fillMaxSize6import androidx.compose.material3.Button7import androidx.compose.material3.MaterialTheme8import androidx.compose.material3.Surface9import androidx.compose.material3.Text10import androidx.compose.runtime.Composable11import androidx.compose.ui.Modifier12import androidx.compose.ui.tooling.preview.Preview13import com.amplifyframework.core.Amplify14import com.amplifyframework.ui.authenticator.ui.Authenticator16
17class MainActivity : ComponentActivity() {18 override fun onCreate(savedInstanceState: Bundle?) {19 super.onCreate(savedInstanceState)20 setContent {21 MyAmplifyAppTheme {22 // A surface container using the 'background' color from the theme23 Surface(24 modifier = Modifier.fillMaxSize(),25 color = MaterialTheme.colorScheme.background26 ) {28 Column {29 Text(30 text = "Hello ${state.user.username}!",31 )32 Button(onClick = {34 }) {35 Text(text = "Sign Out")36 }37 }38 }39 }40 }41 }42 }43}
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: