AWS Amplify Auth Web UI for iOS | SwiftUI 2.0, Xcode 12

what's going on everybody it's your boy kilo loco and today we're going to be going over aws amplify specifically we're going to be covering authentication using web ui and what that means is that we're actually going to be using the web flow that's all created for us which means sign up confirmation sign in all that stuff is going to be built for us and all we have to do is simply open up a window and watch for the different results that come out that allows us to make our users get into our app very simple so we're gonna get into it right now it's all very nice i like it a lot so let's go ahead and jump right on in and as you can see we have a very simple app going on right here it's just your basic ios 14 app right here we have the new app object instead of our app delegate much nicer much sexier right so what we actually need to do is we need to hop over to our terminal and we actually need to start setting up and configuring our project so let's do that now all right so as you can see i'm right here in the terminal and the first thing that we want to do is we want to get our amplify dependencies into our project we're going to be using the dependency cocoapods let's do it all right so as you can see pod in it now we have our pod file let's open that with your favorite editor i'm going to do it in vim all right two things that we need to make sure that we have in here we need to make sure that we have our platform set to ios and it needs to be ios 11 or later or else this is just simply not going to work in this case since i'm using the latest and greatest i'm going to set mine to ios 14 and then we also need the different pods that are going to allow us to get amplify into our project so let's add those now all right so as you can see we have um ios 14 and the platform make sure that that's uncommented and then we also have the pods that i specified before so let's go ahead and save that file and get on out of here and now what we can do is we can do pod repo or pod install repo update all right great so we have the pods in there let's go ahead and clear that screen we have the dependencies now let's go ahead and set up our amplify project because we need to configure amplify locally set it up with the auth configuration that we want and then what we're going to do is we're actually going to send that up so let's go ahead and start with the configuration part and we're going to do that by doing amplify init all right so amplifying it is going to ask me a series of questions i'll go ahead and go through the default answers just by simply pressing enter you can choose your uh default uh code editor i'm gonna choose vim again and the most important part here is that you make sure that you specify that this is ios project it should be pre-selected but if it's not make sure you select that so and go ahead and hit enter to all of those and then we should get one more question i think and yes so do we want to use an aws profile i do and i'll just use the default now in case it wasn't clear you will need the aws amplify cli in order to get the amplifi and it to work it has to be installed on your system so i have a link in the description that will take you to the prerequisites in order to get up and running with the amplify cli but it's very easy to get into your into your project or onto your uh computer and then all we need to do now is just wait for amplify to do all that cool magic and make everything configured for us or like the initialization all set up for us and now that it's done we can actually add a category so today's category once again off let's go ahead and add that all right we do amplify add auth and now another series of questions right so we're trying to get all configured i want the default configuration but i want social provider because we're going to be using cognito in order to sign in so we want to make sure that we have social provider selected next what we want to do is we want to specify how we're going to be signing in in today's tutorial we're going to be using username um do we have any advanced settings that we want to set up nah let's keep it simple now uh this i'm just going to leave default the uri part is actually important so whatever you type in here it actually needs to be inside your app's info.plist we're going to add that later but i'm going to just set mine to auth um auth app and then colon slash slash all right no other uris need to be added the the sign out uri is going to be the same as the sign in uri so let's go ahead and add that all right no other uris are needed and then we don't want to add any other social providers so let's go ahead and hit enter and we should be good there all right perfect so now our configuration is all set up let's go ahead and send this configuration which is built on our local machine let's send that up to amplify in the cloud so we run amplify push it's going to ask us another series of questions as you can see what it's going to do is it's going to show us the different categories that were created in this case the only category that was created or updated was auth and as you can see it says the operation was create so now do we want to continue we're going to hit enter for yes and it's going to essentially take our configuration and send that up to amplify so that we have a matching backend for our local service all right so we're all done we um did amplify push everything's all configured everything worked out nicely and let's go ahead and clear this and let's do ls on our project and what we're actually going to notice is a couple things here right so we have a new amplify folder in inside of our project and we also have these configuration files right we have the amplify configuration.json aws configure figuration.json so those are going to be our configuration files and then um what we want to do is we want to make sure that we're going to open up this xc workspace right because we have cocoapods so let's go ahead go back over to our project let's make sure that that's closed and what we want to do is open up our workspace so that we can work with the cocoapods right so let's go ahead and do that now all right so as you can see we have our project back open awesome let's go ahead and add those configuration files to our project so we're just going to right click on our folder add files to whatever your project name is and and what we'll do is we just want to make sure that we're looking at the top level of our project and once we are we can select those two json files so the amplify configuration and aws configuration.json files let's go ahead and add those into our project and we're all set there now what we want to do is we actually want to use amplify inside of our project and inside of our app object specifically we need to configure amplify before we ever try to use it or else our app will crash so just as long as you configure amplify before you use it it'll be fine i'm gonna do that here in the app object just so that there's no possibility that you know amplify could try to do something else before it's configured because i don't like my app to crash so let's go ahead and import amplify and amplify plugins because we're going to need that uh that import as well all right we got them imported let's go ahead and create a configuration function that's going to configure amplify for us all right so as you can see we created a very simple function it's called configure amplify and all we're doing here is we're adding the plug-in that we need in this case aw aws cognito auth plug-in and then we're running configure on the amplify object as long as those two things succeed and they will we're gonna hit this um print configured amplify however if for whatever reason that they don't like if you forgot to do the to add the um amplify configuration files to your project or something like that um then we would actually get the error and it'd be printed out here so all we need to do now is just make sure that we call this function and i'm going to call it in the init method of our app object all right like if so and all we need to do now is just simply run that project let's see if it works it's gonna work and there it is i told you i told you it was gonna work i told you oh yeah yeah all right so we have our app configured all we need to do now is we need to add some views to the mix so what i'm going to do is i'm going to create two new files and we're just going to set up some very basic views unfortunately they're not going to be too sexy today let's go ahead and get some swift ui views going and i'm going to call this one a sign in view all right so we have our sign in view all we're gonna have is a single button that's gonna simply uh show us the web ui as soon as we tap on it so whenever the user taps on sign in we're gonna be presented with that web ui let's go ahead and add that button now all right so easy peasy lemon squeezy we don't have an action to assign to the button right now it's just a button that simply says sign in we try to make it not look too terrible by adding a little bit of padding a background color foreground color and a little bit of a corner radius make it look a little bit nice so that's our that's going to be our sign in view right what we also need is a session view so let's go ahead and create another view and this one's going to be our session view in our session view we don't need a whole lot all we need to do is simply display the text that says that yes you have signed in and then we need a button that's going to allow us to sign out so let's add that now all right so as you can see very simple stuff a v stack we're going to just make sure that this text is centered by putting two spacers around it and then we have the button pushed all the way to the bottom as you can see right there so very simple stuff the last thing that we need for configuration and setup is that we need to head back over to our info.plist and we need to make sure that we add the um the uri that we added when we were doing the cli steps so let's go ahead and open up our info plist file as source code what you're going to do is you're going to scroll all the way down to the bottom look for the last closing dict tag the last dictionary tag and what we want to do is we want to add in a couple of lines so i'm just going to go ahead and copy and paste it in right here but what you'll actually see is the key is going to be cf bundle url types it's going to be an array and the next value is going to be another dictionary which is cf bundle url schemes which is another array and then the the first value inside of that array is going to be whatever you put for your uri um minus the colon slash so in my case i actually called mine auth app right so i want to make sure that i put auth app here now if you don't want to do the um you know the source quote source code route what you could do is you could simply either type in url types it has to be spelled exactly like this and you need to make sure that you specify the different types so that you can do the the proper types of drop downs hit the url schemes and then add in your uri right here so either way um i think that the source code way is easier but it's really up to you on how you want to implement it all right so all the setup is pretty much done we have our views we have the configuration all set up we're ready to go now we just need to start adding in the logic part of our app in order to actually be able to um sign in sign and like sign out and things like that so let's go ahead and create a whole entire separate object that's going to handle that logic for us right so what i'm going to do is i'm going to do a new file this will be a swift file and i'm just going to just i'm just going to call this auth service all right so our auth service is going to be extremely simple and straightforward right so first of all it's a it's an observable object because we want to be able to observe the different properties on this but specifically it's only one property and it's going to be this is signed in we're going to mark is signed in with the app published property wrapper which is going to essentially make it a publisher right so whenever this value changes we'll be able to observe the different um changes and we'll be able to be able to show different views based off of whether this is is signed in or whether it's like true or false so every time that we update our state this is the value that we're actually going to be updating that's going to be related to our state now the very first thing that we need to do before we do any sign in and sign uh like sign up or log out or whatever we need to determine where we're currently at as a user are we already signed in or not right so let's go ahead and create a function that will check the the user status to see if they're signed in or not all right so as you can see we have this check session status function that we added and all it's going to do is it's going to um use um amplify.auth.fetch auth session now everything in amplify is extremely straightforward and simple to use you're always returned well i should say you're almost always returned a result that either has a success case or a failure case right so it's your typical swift result type and you're going to get a success with a possible value right in this case we're going to get a session but if you fail then you get an error right we're not going to be handling errors today but so i mean you failed gracefully i'm just going to print it right here we have our session now our session has a property on it that's called is signed in it's also a bull so all we need to do is um set the session dot is signed in to our um to our auth service dot is signed in so let's go ahead and do that now and just like that we're going to update the state of our app to say that we are signed in based off of the session is signed in property now keep in mind that we are using a class and we're referencing self right so there's a possibility for retained cycles that means that we need to use a capture list and use weak self the other thing that we need to be wary of is that this is an asynchronous operation that is happening on a background thread which means that whenever we update the state we need to make sure that we're we return to a main thread because this is going this uh the self dot is signed in this property right here is going to be directly observed by our ui and we want to make sure that any changes to this value is happening on the main thread so let's go ahead and add a dispatch queue right here all right perfect so we're we're changing state on the main thread and we're also making sure that there aren't going to be any retain cycles now what we can actually do is head back over to our app object and we can simply call check session status right after we configure amplify so that we can figure out are we signed in or not so as you can see once again we are using this as an observed object and it's just going to be simply equal to an instance of an auth service and once we have an instance of that auth service we can say auth dot check session status so that will update um the is signed in value right now what we can do is we can head back over to the body we can remove this this bs content view right and we could actually determine which view we're supposed to show are we supposed to show the the signed in view or are we supposed to show the session view so let's go ahead and add a switch statement or a if statement that's going to handle that for us and just like that we have the logic that determines which view we want to show so let's go ahead and run this and make sure that everything is working as expected and if it is we should be able to see our sign in view all right bam there it is it ain't sexy but it's working right so now we have our sign in view which is perfect this is exactly what we wanted but what we actually need to do now is we need to add the actual functionality in order to sign in so let's head back over to our auth service and now let's go ahead and start adding in some of that functionality i'll create a function that's called web sign-in that's going to sign you in with the web all right so how here we go we have the web sign in uh function right and we are simply calling amplify.off in with web ui very simple very straightforward we have this presentation anchor thing i'm going to talk about it right now but let's skip it for right now we have a result once again swift result type so we have a success and we have an a failure now if we get success we're simply going to print out that yes we did sign in if we get a failure we'll just simply print out the error now going back over to the presentation anchor in order for us to show um the the web ui what we actually need to do is we need to show or designate a window that will display um the ui that's going to be responsible for the um the sign in screen right the web sign in so what we're actually going to end up doing is we're going to access a window and the easiest way to do this is simply take the window that's already supplied to the scene delegate so let's go ahead and create a computed property called window that will give us our window based off of whatever window is in the scene delegate all right so as you can see we have this window that we're simply grabbing from the window scene delegate and then we're simply returning it so now what we can do is we can actually pass this window into our function and use it as the presentation anchor so now we're pretty much set up on the sign in part but notice that we actually didn't use uh this opportunity in the success block to change the state of the is signed in and the reason why we're not going to do that is because there's also this other tool that we can use which is called hub so the hub is actually a listener for all these different events and we can specify that we want to listen to all auth events and then we can trigger functionality based off of that so let's go ahead and create a function uh that will allow us to observe all the different auth events and listen for those changes and then determine what our what our state should be are we signed in or are we not so let's go ahead and add that below the webs uh the web sign in all right so very similar to what we've already seen before except this time we're going to be using hub and we're going to be listening to the auth channel for different events now once again we're giving a result except this time what we're going to do is we're going to switch on a property called event name of the result now the event name will be one of these hub payload event names and we're going to be looking for specific events so i'm going to be looking for auth dot signed in and that's what's going to allow me to trigger is signed in to be true and then for the auth dot signed out or the auth dot session expired that's when i'm going to actually sign my user out now just like before we are inside of a class so we want to make sure we eliminate those retain cycles with the capture list and then we also want to make sure that we're on the main thread when we're updating these so let's go back and add those changes now all right perfect so as you can see capture list weak self and then returning to the main queue for signed in and for sign out so let's go ahead go back over to our app object and all we need to do is we need to make sure that we're listening for those events all right perfect so now we're we're ready to listen for those events we just need to trigger those events and the way that we're going to do that is since once again this is an observable object our auth surface is an observable object we can inject it into each of our views as an environment object so let's go ahead and do that now so this will inject it as an environment object into each of these views and then all we need to do is head over to the sign in view and make sure that we access it and trigger the correct action which is the web sign in whenever we tap this button now tell me that this is not the sexiest sign inflow that you've ever seen in your life that's clean all right let's go ahead and run it make sure all of this is working all right so we get our sign in right we get our sign in view we hit the sign in button what happens we get this this question or this alert that asks us do we want to continue to show this window we say continue it opens up the web ui which was already created for us which is really nice so as you can see here i just need to specify a username and password to sign in i don't have an account yet so i actually need to sign up that flow's handled for us too and we're just going to enter in a username and email and a password all right once we have all that information uh filled in let's go ahead and sign up now it's sent a verification code to my email i need to just grab that all right i got the verification code all right i think that i entered that in right and as you can see i did and we got the success our hub our hub actually saw that there was a sign in event and it signed us in automatically we're now in the session view oh that's clean if you ask me so now we're pretty much done right like we we have the sign in flow all set up all that stuff is set up all we have to do now is simply do the same thing that we did with the sign in view where we're actually um accessing the auth service and we just need to be able to sign out so let's go ahead and add that in now so i'm heading back over to the session view i'm going to go ahead and add in our auth service oh and actually we didn't even add sign out yet so i just realized that let's go ahead and jump back over to our auth service now as you can see i'm already expecting to call it right here but let's jump over to our auth service let's go ahead and add that sign out logic in here right now all right so as you can see very simple very straightforward just like everything else that we've done so far auth.sign out we get a result and once again we're not doing anything inside of this result other than printing right so we have our hub listener which is going to handle the sign out and the session expired events so there's nothing that we even need to do inside of this completion block but if you did want to do something um in your app you could just simply edit under the sign uh under this success or you could fail gracefully handle that error now if we go ahead and head back over to our session view we should see that we get some syntax highlighting back if xcode likes us it likes us today that's very nice and we can see that everything is working and is in place so let's go ahead and run that now and remember that we signed in so we should still be signed in when this uh xcode uh build loads and we are still signed in because we set it up oh smooth like all right so now we're already signed in let's make sure that we sign out it's going to ask to open up the window to make sure that we can sign out it's going to handle that event for us it's going to redirect that um that uh information back into the app and amplify is going to handle it and as you can see we're back at the sign in screen so let's make sure that we can sign in because we signed up last time and went into the app so once again continue and let's just make sure that we could sign in all right i entered my credentials let's go ahead and sign in and bam we signed in yay so as you saw that's extremely simple amplify keeps everything very consistent all its apis are very consistent it's very like very swift like unlike anything that you've seen with aws in the paths this is like extremely simple and straightforward to use i really enjoy it so i hope that you learned something new i hope that you enjoyed the video and i love that you made it this far really appreciate it um but if you have any questions about amplify feel free to reach out and ask me i would be more than happy to help help it's actually my job to help you so if you have any questions about amplify or you get stuck at some part let's go ahead and jump on a call i'd be more than happy to help you out so that's going to be it for today i hope that you enjoyed the video now go out there amplify your project and keep coding passionately

Channel: Kilo Loco

Views: 3,345

Keywords: aws amplify, aws amplify auth, aws amplify auth ios, aws amplify auth swift, swiftui, amplify ios, amplify auth ios, amplify auth swift, swiftui login, swiftui sign in, swiftui sign up, swiftui auth, swiftui auth flow, amplify sign in, amplify sign out, amplify auth web ui, getting started with aws amplify, getting started amplify ios, amplify cognito, amplify user authentication, amplify cli, amplify uri, amplify federated user, amplify social sign in, amplify beginner

Id: 74fl2EgpXSE

Length: 25min 30sec (1530 seconds)

Published: Tue Aug 04 2020