AWS Amplify Authentication Flow for iOS SwiftUI

what's up i'm kilo loco and today we're going to be going over aws amplify specifically we're going to be going over auth i'm going to show you how to log in sign up confirm your account and log out of your account all using swift ui so all you're going to need is the aws amplify cli in order to follow along and if you want to use the projects or see the source code that i'm writing look at the description for the link and you'll be able to see the repo the starter project and the finished project so let's go ahead and jump right on in so as you can see our app is going to start off with a sign up view and we already have the sign up view built it's pretty simple it just consists of a text field for the username email password and then a button for the sign up as well as another button for login confirmation is pretty much the same as well and the login view is also pretty much the same once we sign in we'll also be able to see a session view which it's going to simply display a message saying you signed into amplify and then it's party time so the first thing that we need to do is we need to go over to our terminal and we need to actually add amplify to our project so open up your terminal and we're going to be using cocoapods to get amplify into our project so let's do pot in it once that finishes if you do ls you should be able to see that there is a new pod file in your project open up the pod file once we have our pod file open the first thing that we need to do is we need to update which platform we're going to be programming for in this case i'm going to be using swift ui on the latest xcode beta to use ios 14. next thing i want to do is add amplify as a pod as well as the cognito auth plugin so let's do that now now that i have my two pods in place let's go ahead and save the file and exit now all we have to do is run pod install repo update now that we got the dependencies out the way let's go ahead and run amplify init using the amplify cli if you don't have the amplify cli make sure you go to this link right here in order to download it i'm going to go ahead and use all the default information for my project so my project name will be called authenticated i'll be using the dev environment my personal preference for editors is vim and we're going to make sure that we select ios i'll go ahead and select the default which is yes and i'll also use default for the profile if we go ahead and do ls right now we can see that we now have an amplify directory in our project what i want to do is i want to make sure that we add the auth category to our amplify project so let's do that now i'll go ahead and select the default configuration we're going to be using the username so press enter and i'm pretty much done so now our app has pretty much been provisioned with the auth category all we need to do is push that up to amplify the back end so that everything is in sync so let's run amplify push as you can see we have the auth category which has been created we're going to say yes once amplify push finishes we could head on over to our project we just need to make sure that we open up the workspace so i'm going to go ahead and close my project that's in the background right now and i'm going to make sure that i open up the workspace now that our app is open again let's go ahead and make sure that we drag in the configuration files into our project so i'll go ahead and open our projects folder and i'll select the aws configuration as well as the amplify configuration json files and drag them right into my project you're going to want to make sure that copy items if needed is unselected now what we need to do is we need to navigate back over to our app object and import amplify and amplify plugins now let's go ahead and create a function called configure amplify which is going to actually set up the plugins for us in this case we'll be adding the auth plugin now we have our configure amplify method which is simply adding in the aws cognito auth plug-in into our amplify and configuring it as long as we're able to get this far we know that amplify has successfully been initialized and configured now this function can be called either in the init method of our app object which is what we're going to do since we're using the new swift ui app object or you could call this function from inside of did finish launching with options if you're using an older ui kit project so let's go ahead and add that in now now that we're calling configure amplify let's go ahead and run the project and make sure that everything is working as expected all right build succeeded and as we can see our app opens up to the sign up screen and we can see that amplify configured right here perfect so what we're going to actually start doing now is we're going to create a session manager which is going to allow us to run a series of different calls all through auth and it's going to essentially manage the the state of the app whether we're going to be showing the sign up screen the login screen confirmation screen or the session screen and it's also going to hold all the calls that we do in order to sign up confirm or log in to the app so let's go ahead and create a new object now all right so as you can see we have this new session manager class and it's going to conform to observable object because we're actually going to be observing a value called auth state on this object but first in order to create that auth state we need to create a new enum that will represent the different types of states that we can be in so let's go ahead and add that now so as you can see there's four different auth states that we could be in sign up log in confirm a code which requires a username and a session which will require a auth user so what we need to do now is we need to add a state that we can observe on the session manager itself and it also needs to be able to publish the values when it does change so let's go ahead and add that now here's our auth state and as you can see by default i'm going to set it to be login now what we want to do is we also want to see is the user currently signed in or not so that we can determine which state that we want to immediately put the user in or if they're logged in then we want to put them in a session state if they're not logged in then we want to show them the login screen so let's create a function that handles that logic right now all right perfect as you can see we have a new function called get current auth user and we're simply checking if amplify auth has a current user if it does then we fall into this block and an auth user is passed into our session and we know that we need to update our state to session if not then we know we need to show the user the login screen next i want to add two more functions that will just simply make it so that i can show the sign up screen as well as show the login screen all right perfect so now we can simply show the sign up screen or the login screen whenever we need to as well as get the user state so we're gonna pause on this part of the session manager for now and we're gonna head back over to our authenticated app object and we're going to actually start managing the state let's go ahead and create an instance of our session manager we want to be sure that the session manager is an observed object so that we can find out whenever the auth state is changed down in the body what we're going to do is we're going to make sure that we're going to show the different views that we have already set up based off of the current state so let's go ahead and write a switch statement that will handle that so as you can see inside of our body and inside of the window group we're just simply going to switch on the off state of our session session manager if it's login login view sign up sign up view confirmation code confirmation view and session session view now we currently have a warning right here on the session view since we're not using the user object so what we'll do real quick before we continue is jump over to session view and let's make sure that we're passing we're able to pass in a auth user into this session view once we have the user property on the session view we're going to get an error down here on this preview so if we want to continue to be able to use previews what we would need to do is we would need to create an object that conforms to auth user and pass it in right here i'll create a dummy object real quick all right so as you can see our warning went away if we go back over to our app object and for our session case what we could do now is we could pass the user into our session view let's go ahead and run that and make sure that everything is working as expected so now we're showing the login view which means that everything is working so far so good so let's keep going so now keep in mind that we do have our session manager but we need to pass it into each of these views that we want to use it we're going to be using the session manager to log in sign up confirm the code that we get in our email as well as log out so we actually need to pass the session manager as an environment object to each of these views each view is now being passed the session manager we just need to make sure that we can access it from each view as well so let's go ahead jump into the the login view and make sure that we add an environment object that we can access alright so as you can see it's as simple as setting it as an at environment object since it's already being passed in and we just give it the same name session manager and it's of type session manager let's go ahead and add this to the other three views so for sign up we're going to do the same confirmation view and session view now that each of these views has the session manager inside as a property what we need to do is we need to make sure that the session manager is able to handle each of the different requests that each view is going to perform so for example the sign up view is going to need a call sign up so what we're going to do is we're going to go to the session manager and add the s the sign up method in here handle all the logic and we're going to make sure that we update the state when necessary so let's go ahead and do that now so as you can see in our session manager we have the sign up method where we're going to pass in a username an email and a password the email needs to be passed as a user attribute like so and keep in mind that we need to pass an array of attributes so i wrap mine in braces so that it can be an array of user attributes next what we need to do is we need to create signup request options and we just do that by passing in the attributes that we created from the line before from there we we just simply call auth.signup and we're going to pass in our username our password and then the options which contains our email information now we get a result which is going to have one of two outcomes either it's going to be success or it's going to be failure and we just simply handle those by updating the state accordingly so as you can see the success is giving us a sign up result while the failure is giving us an error right now we're just going to print the error and for the sign up result what we actually need to do is we need to check if there's a next step within the signup result we have a property called next step and that will determine whether we're actually done or if we need to keep going and perform a different task now if we're done then we should simply sign in but by default you actually have to confirm your account before you can be a registered user so in our app since we used everything default we won't actually be done at this step and we know that we will actually have to confirm the user but we'll add in the logic here anyways so as you can see now we're just simply switching off of the signup result that we received in the success case and we know that we won't be done but if we are we will have finished sign up and since we won't be done we're going to actually have a confirm user with details that's going to be passed in so if you need a little bit more information as to how as to how you should proceed with this user that's attempting to sign in you can get more information from the details all we want to do is we want to make sure that we're going to switch our state to confirm code and we're going to make sure that we pass in the user name that was passed to the sign up method up here so let's do that now so all we're doing is we're updating the auth state to confirm code and we're passing in the username now i'm wrapping it in a dispatch queue main async which is going to bring the thread back to the main thread and make sure that we're not trying to manipulate state or any state that affects views from a background thread we also added a capture list in here so that we can make sure that we have a weak reference to self so that there aren't any retain cycles so before we actually go through and start testing out this sign up code let's make sure that we also have the confirmation code set up so that we can confirm our username and our code and make sure that we update the state to show that we should be logging in so as you can see below the sign up method that we have in our session manager we have a new confirm method which is going to take in a username and a code we're simply going to pass that username to amplify.auth.configuresignup for the username and the confirmation code and then just like any other amplify api we're going to get back a result which is going to come with a success and a failure so if we get an error we'll see that we pass in an error down here and we're once again simply going to print it and then if we have a success we have this confirm result now the confirm result will once again say whether there's a next step or if the sign up is complete at this point the sign up will be complete but we'll just make sure that we add an if statement to handle that just to make sure all right so we're checking if the sign up is complete as long as it is we're going to make sure that we once again return to the main thread and we're going to say show login and i once again added this capture list right here so that we don't have retained cycles so now this should handle our sign up flow we can head back over to the sign up view and make sure that we call the correct methods whenever we need them so as you can see we have the sign up button so let's go ahead and call sign up right here all right for the sign up button as you can see inside the action i'm just simply calling sessionmanager.signup passing in each of the respective properties and i need to also update this button down here that says already have an account log in we want to be able to show the login screen so let's go ahead and update this as well alright perfect let's go ahead and do the same thing for our confirmation view so jumping back over to the confirmation view we have an action right here on the button on the confirm button let's go ahead and add in the respective call all right and in this action we can see that we're calling sessionmanager.confirm passing a username and the code so let's go ahead and run it and let's see if we get it to work all right we're all loaded up and i just realized that this sign up button actually won't work because we didn't hook it up so let's go back over to the login view and make sure that we have the sign up button working so that we can switch over to the sign up screen so go to the login view we're gonna go to this area right here down where it says don't have an account sign up and we're gonna just make sure that we call dot sessionmanager.show sign up all right perfect let's run it again all right so we have our login screen we hit show sign up bam now we can tell that this is the sign up screen because the sign up button as well as the three different fields let me go ahead and add in some information all right i hit sign up and as you can see it took us to the confirmation code screen and we also have our username right there and now i actually have my confirmation code so i'll just go ahead and enter that in and if i hit confirm we should go to the login screen as long as that's correct and we're back here at the login screen perfect all right so we were able to sign up and confirm our account now all we need to do is we just need to log in and we're going to do the same thing that we did with sign up and confirmation that we that we're going to do with login so as you can see we have an action for our button in the login view but we don't have a method that's attached to the session manager so let's jump back over to the session manager and let's add that login that login method right now all right just like we did before we're going to pass in the username and the password and this time we're going to call auth.sign in and we're going to pass in the username and the password that's all that's required once again we get a result which has two cases success and failure failure will once again return an error and the success will turn return a sign in result as long as this sign in result says that we have successfully signed in then we're good to go so as you can see in my success case i'm going to make sure that i check if we are signed in if the sign in result returns is signed in we're going to run this block of code once again return to the main thread and then we're going to call get current auth user if you don't remember that one that's the one where we're gonna we're gonna check the current user to make sure that we are able to get the off user and then what we'll do is we'll actually create a new session and we'll set that to the auth state so before we run that let's go ahead and head back over to the login view and now we just need to call our new method all right so for the login button our action is simply going to call the sessionmanager.log pass in our username and password and we should be all set let's go ahead and try to sign in and if i have signed in successfully we should show the session screen so let's see let's go and there it is boom you signed in using amplify oh that's beautiful so we still have a sign out button let's go ahead and make sure that we're utilizing that let's go back over to our session view and what i'll do now and let's also throw our name in here because we also want to see our beautiful name okay so i just interpolated our username into this sentence just so that we can see it there and then all we want to do is we want to make sure that we're able to sign out so once again we have our session manager let's jump back in and towards the bottom we'll just create a new method called sign out all right so as you can see we added our sign out method which is simply going to call auth.sign out and it simply has a closure so once again a result success if we get success there's nothing that we need to be passed here all we need to do is we need to just call get current auth user which once again since we're signed out this get current user is actually going to return a nil and that's going to set our state to log in we just want to make sure that we're wrapping this in a dispatch queue going back to the main thread so that once again we're on the main thread when we're doing ui updates and then the failure once again just returning the error and as i said before we're going to just simply print out that error let's jump back over to our session view and let's make sure that we call that method in our sign out action all right and there we go so let's go ahead and run this and let's see if we're able to sign out now and we should also be able to see our username as well uh oh we're on the login screen so that means that we're actually not being signed in even though that we're currently signed in so what we actually need to do is go back to the the authenticated app and we need to make sure that we're calling our get current user method to update our state because right now we're calling configure amplify which is great it's running all this but we actually haven't done anything in our session manager to make sure that our state is current so we need to call this method to make sure that our state is updated so that if we do currently have a current user signed in we're able to pass that in as a session and update our our off state right here so let's go ahead and make sure that we call that method from the init all right let's run that again and as you can see now we're automatically signing in because we are updating that state so as you can see we have our username mine was kilo and we signed in using amplify but let's see if we can sign out we sign out and bam perfect we go straight to the login screen we're gonna run it again make sure that we're still signed out we are let's go ahead and try to sign in one more time all right hit login and we're back in so that is how you set up an auth flow all right and that's pretty much it as you saw we were very easily able to implement aws amplify auth into our project we covered signing up confirming our account signing in and logging out and if you have any other questions or you get stuck with anything that has to do with aws or amplify make sure you reach out to us on our discord you can find the link in the description below now go out there and amplify your project you

Channel: Amazon Web Services

Views: 7,492

Keywords: aws amplify, aws amplify ios, aws ios, aws amplify auth, amplify auth, amplify authentication, aws authentication ios, amplify authentication ios, amplify auth sign in, amplify auth sign up, amplify auth sign out, amplify auth confirm, amplify auth confirmation code, amplify auth flow ios, amplify auth swiftui, amplify auth swift, amplify auth plugin, ios serverless auth, ios full stack auth, ios user session, ios sign in, ios login, ios sign up, ios login screen

Id: wSHnmtnzbfs

Length: 25min 36sec (1536 seconds)

Published: Wed Aug 05 2020