Building a Complete Login Registration Flow in Jetpack Compose | Step-by-Step Tutorial
Вставка
- Опубліковано 9 тра 2023
- This is what you will do in production apps, Welcome to our comprehensive tutorial on developing a complete login registration flow using Jetpack Compose! In this video, we will guide you through the process of creating a robust and user-friendly authentication system for your Android app.
Please support the channel friends❤ hit that subscribe button and share it with your friends 🙏
& Join this channel to get access to perks including project code repos & call with Chief :
/ @nativemobilebits
If you want to learn Jetpack Compose, you can checkout Our Jetpack Compose playlist :
• Master Jetpack Compose...
If you are new to Android, and want to learn Android in 2023, you can checkout this playlist:
• Learn Android from scr...
Throughout this tutorial, we will cover every aspect of the login registration flow. Starting from the design and layout, we will demonstrate how to create beautiful and responsive UI components using Jetpack Compose's intuitive syntax. We will then dive into the implementation details, covering user input validation, error handling, and secure password storage.
By the end of this video, you will have a solid understanding of how to build a seamless login registration flow in Jetpack Compose. Whether you're a beginner or an experienced Android developer, this tutorial will provide you with the knowledge and skills needed to create an authentication system that meets modern standards.
Join us on this exciting journey into the world of Jetpack Compose and elevate your Android app's user experience to new heights.
Don't forget to like, subscribe, and hit the notification bell to stay updated with our latest tutorials. Let's get started!
Please drop a comment after you watch this video - your thoughts.
Please support the channel friends❤ hit that subscribe button and share it with your friends 🙏
Join this channel to get access to perks including project code repos & call with Chief :
ua-cam.com/channels/TjQSpx2waqXTC37AgM8qyA.htmljoin
finally I found the content which I was looking for. Very well explained and have covered all the basics.
Glad you liked it, stay connected and checkout more parts of this series you will like those too
one of the best channel , it was so fun designing the ui with jetpack , was able to learn so much , not completed the whole video (30 min) now it's getting late
thx for the quality uploads
Thanks❤ watch out the rest of video and other compose videos, also please share channel link with your friends who are into Android
Thanks for putting together this tutorial. It's very useful and helpful for beginners in Jetpack Compose.
Thanks, You should be checking our compose playlist here, you will like it ua-cam.com/play/PLLwcRoh3a6u7VvJ9QuKrsuB7UuNCMtvkq.html
Thank you for keeping it very basic sir 😊 it’s so helpful ❤
Glad you enjoyed it ❤😍
Nice, finally when i was finished my study. i watch this
Definitely once you watch share your favorite part
@@NativeMobileBits yes sir
nice one! keep adding more!
Glad you liked my content 🥰 yes more coming soon
Gracias, saludos desde Ecuador
Your welcome ♥️♥️ please explore other videos too at our channel
Love you for your job and that explanation, made me a better developer. I was able to implement that code for my new business idea.
Wow that's a fantastic thing to hear, glad to be of help my friend, please support the channel ♥️🙏🏻
Also you can check our others video we also have one playlist for complete Android compose projects ua-cam.com/play/PLLwcRoh3a6u6IsUrXoKaoZNb5LvhOhV8J.html
And yes please keep sharing these wonderful feedbacks
@@NativeMobileBits Sure I'll do so.
Something Like a git repo would be great
I will suggest you can code along, although all the resources and much more benefits are provided once a user join channel membership
I successfully finished the tutorial and the content was amazing.
I request you to please add Form Validation using Material 3.👍
Glad to hear this, this video is a part of our compose playlist where we cover all these topics and yes we have covered form validation also here you go check out the next part of this video here are the links - ua-cam.com/video/n9IrkANVGxU/v-deo.html
ua-cam.com/video/peSfaIhKgfw/v-deo.html
ua-cam.com/video/008f7IUVYDQ/v-deo.html
ua-cam.com/play/PLLwcRoh3a6u6IsUrXoKaoZNb5LvhOhV8J.html
Thanks, that was a very good walkthrough ❤
Glad ❤ please checkout more videos of this series all parts are connected in a project development manner
@@NativeMobileBits
I will make sure to follow thank you very much. i am subscribed :)
Thanks❤
Your videos are awesome sir. 🙂🙂🙂🙂🙂
Much love 🧡 keep supporting
thank youu
This video is the first part and we extend this project further with a lot of things in our compose playlist, do checkout the next parts here ua-cam.com/play/PLLwcRoh3a6u6IsUrXoKaoZNb5LvhOhV8J.html&si=E59lEfR8LTt1SdmI
Nice
You can checkout our other next parts of this video in our compose playlist
I appreciate your efforts and it is really great work, however as a beginner I found you really really fast and you would do some things without explaining them. You would also use resources like icons without providing links to them. However thanks
Thanks❤, These icons you can take from project GitHub repo link in the description and I would highly encourage you to visit videos in order in our compose playlist -
ua-cam.com/play/PLLwcRoh3a6u6IsUrXoKaoZNb5LvhOhV8J.html
Thanks for a nice tutorial. I have an issue that when clicking on Privacy Policy or Terms of Use, it doesn't navigate to Terms of Use screen.
I moved the Log.d(...) inside:
if ((span.item == termsAndConditionsText) || (span.item == privacyPolicyText)) {
Log.d("ClickableTextComponent", "{${span.item}}")
onTextSelected(span.item)
}
And, it prints {Privacy Policy} when clicking on Privacy Policy; and it prints {Terms of Use} when clicking on Terms of Use. But it doesn't open up the Term of Use Screen.
Wondering if anyone also see this issue?
Glad you liked it, did you add all the routing logic, verify your code with this repo here, I have pushed all the code for this tutorial in this repo, you can download the code and verify with your code if somewhere you missed something github.com/droid-lover/AppsInJetpackCompose
im also facing same problem i checked the code multiple times plz help
I have the same issue too. I downloaded the code from github then compared my codes against it, I do not see anything different. I can Log.d the message but I can't navigate to the TermsAndConditions screen.
great video and very well explained
Thanks it’s the first part of a complete playlist do checkout next parts as well
@NativeMobileBits Hi , great video but suddenly you have created a router oof which you have not explained anything about can you check that once. if you can give the link that would be great to video where you have created it that would be great
Your content is soo good and underrated. I've watched many videos of yours and every part is clear✨✨.
There is a slight problem in my app , it's not a problem but a lagging issue . Like when I am clicking on my outlinedTextField the animation of label is a bit laggy , not that much lagg but a very slight lagged animation. Maybe you also have noticed or it's just with my application only? Thankyou
First of all, thanks for noticing, actually I just try to provide actual content, instead of - details of any big company package and all :D , that's why maybe .
&
answer to lagging issue, actually that outlined text api was in experimental mode, it will come up with more enhancements in future updates :) , stay connected and keep blessing our channel with your love my friend.
@@NativeMobileBits yes , I was also thinking the same . Thanks for helping 💙
ya, also if you are learning compose, do checkout this playlist , it has multiple jetpack compose projects,
ua-cam.com/play/PLLwcRoh3a6u7VvJ9QuKrsuB7UuNCMtvkq.html
and do let me know what you are learning I will share relevant things. enjoy and don't forget to talk to your loved ones my friend
make a course on how to use compose for multiplatform. it's the future it would be great. thanks in advance
Yes noted, and My Main idea is to build a beautiful Android & Kotlin Library, for all the people, with all the step by steps learning videos. and yes we will cover this too in future. stay connected
also do share about us with your friends in android field 😊
Hello Sachin,
Let me first congratulate you for putting out an awesome and very useful video tutorials. They are very practical and easy to follow step by step.
After following your "Login Registration" series, I noticed one minor issue. The app doesn't handle configuration changes when rotating the device orientation. For example, after entering the input fields on the login screen, if you rotate the device, you will lose all entered values. One of the major goals of the ViewModel approach is to support configuration changes. After researching this issue further, it appears that the Textfield component used doesn't use the ViewModel fields directly to control the UI fields. Instead, it uses a call back to send the field value to the caller, which
updates the viewmodel values manually.
Would you please take a look and advise? Thanks in advance.
❤️
Hello Sir, Icons.Filled.Visibility . in this line i got an error in visibility. how to solve this
Nice tutorial. i didn't forwarded the video but after 40 mins sudden surprise "Crossfade" and Router. when it is created?
Sir how did you show the "all, classes, files, symbols, and action" at 8:36 mins. Because i couldn't find it. What's the shortcut key for that?
double shift in Mac, in windows use CRTL+SHIFT+F
Sir, I request you to please do full android development course with basics in order using Jetpack compose
Yes ❤ we are doing the same, please checkout this playlist ua-cam.com/play/PLLwcRoh3a6u60ZEVdcKijpnRFTALeJwL-.html
Here we are going to cover all Android concepts
Keep your support with the channel
doubt !! how to show a taost message that the email is in use ? as it is coming in the log but i want to show to the users , so how ??
the same way you can show as we show in general
@@NativeMobileBits showing error in logcat - E Initial task failed for action RecaptchaAction(action=signUpPassword)with exception - An internal error has occurred. [ API key expired. Please renew the API key. ]
Sir, your explanation is good, but as I observed in the above tutorial, you haven't explained why particular terms/keywords are used, what a router is, and why we are using certain functions; little clarity is missing. Hope in the upcoming tutorials, you will improve. And Thank you so much for your efforts.
Sir, if Possible Could you start live interaction classes as an entire course even though it is paid plz sir🙏
😊👍 try 42:13
Hi do you think is posible to integrate this login screen with the fun fact project? any tips? thanks very much
Everything is possible 😊
Sir already finished your tutorial for about a week but why is my project couldn't navigate to login and signup I don't know why but I did all the steps you show.
maybe you missed something, you can check the code here and find out what you have missed, github.com/droid-lover/AppsUsingJetpackCompose
I put val at line: val currentScreen: MutableState = mutableStateOf(Screen.SignUpScreen). It's not work in navigate from SignUpScreen to TermsAndConditionsScreen. And it works after I change val to var :)
I dont see a link for a corresponding github repository. Can you please add it?
Great tutorial btw. Thanks!
Did you check the description
hey sir how can i edit the size of the Icon in the textfield? because it is too large.
Go to icon svg reduce the dimension there
@@NativeMobileBits how sir?
you didn't show how to do it on your tutorial ;(
Yes because there was no need if it in tutorial I will show in next videos somewhere
hello! love the content! may I ask if do you have a github repo for the code of the complet login registration flow???
Do check the description 😊
great very helpful. If you can share the source code that would be better for us
Yes, sure you can check the pinned comment. also please check this playlist in order to understand it best possible way ua-cam.com/play/PLLwcRoh3a6u6IsUrXoKaoZNb5LvhOhV8J.html
Marvellous tutorial, thank you so much. I like the color scheme you use in your editor, how would I replicate it?
Glad you enjoyed it it’s part of a series so check next videos too (check description) and for emulator I think you need this bro 😎
ua-cam.com/video/bzNDADcEXzM/v-deo.html
Hi, how did you get the icons? because I can't import them from anywhere? How can i get the icon, do I have to create them? andi can't find github link in description
Spend some time on channel, just check the pinned comment 🌚
I found it, Thank You! btw i really liked the way you explained it! @@NativeMobileBits
For me compnentshape is not showing in Android studio it shows error
you can clone the code, check the description or pinned comment
I dindt understand how you imported the colors (at 9mins 22 sec). Could you please tell me?
for this we just took colors code from Figma designs and added inside colors.xml file, you can find this file in res folder, if its not there, you can create as well and add the colors you want to use, you can also pause the video and take the same colors code and here I have pinned comment, added the code you can check this as well
Another doubt . Where do we get all these icons ? Like are they png images or XML files.?
You will find this in code did you check the project I have already pinned the comment which has project link
And if you don't know how to take project code of this video from our GitHub account, then watch this video to learn to use GitHub ua-cam.com/video/Xj8FHl83tOc/v-deo.html and then clone code
This material API is experimental and is likely to change or to be removed in the future. how to fix that, sir? it happened when in the colors = TextFieldDefaults.outlinedTextFieldColors
been searching for a solution but cant find one
It’s going to be alright once it’s stable in upcoming compose versions you can use without experimental but it’s not going to cause any harm to you
@@NativeMobileBits sir, is there any solution for that? its error.
@@MusicKaaa colors = OutlinedTextFieldDefaults.colors(
focusedBorderColor = Primary,
focusedLabelColor = Primary,
cursorColor = Primary,
),
How did you get String.
In video 8.43 minutes?
I just copied the string and added into strings.xml and then I used it 😊
sir Now I am automatically redirected to the home page. I want to change this and I do not know where is the part for making it open the home page automatically when restarting the application after creating the account and is there . any way To communicate with you؟
Yes you can directly go to the home page we have done session management in next videos, checkout the next videos in the jetpack compose playlist
ua-cam.com/play/PLLwcRoh3a6u6IsUrXoKaoZNb5LvhOhV8J.html
@@NativeMobileBits i mean i do navigation bar and i make it open the navigtion bar with the screens but its still open the home screen without the the after log in again thats why i need to contact with you for that there is alot of problems in it aslo i need to now how i can solve it like i cant add google log in in log in or sign up screen and i cant delete the account for try the log in with other account from the app and i cant add it or edit somethings becuse i dont know i should change it from where so i need contact with you :/
@@NativeMobileBits and your telegram groupe is locked so i cant send my problem it
@@goodplayer2810 this is a fully working project, you can find code from here, now these seems to be your own new requirements which you can extend on top of current project, if you want current working code, you can take from here github.com/droid-lover/AppsUsingJetpackCompose
so what the solution now?@@NativeMobileBits
thanks , can u please share the github link aswell
All code repos are under channel membership
Hello sir, could you share your icon resources?
Did you check the description :)
8:36 How can i do this shortcut?
Double shift in mac
Good tutorial
But how "Crossfade" and "Router" appeared suddenly at 42:12
I see I would recommend watching jetpack compose crash course video from the same playlist I have explained it there again
Thank you@@NativeMobileBits
Hope you found the video
i'm following all the code same way but my app is not running
It should, You can use the code from the description and comment also
From GitHub?
Ty so much for your response
Your welcome friend, do checkout our other videos 🥰
yaar ye postofficeapprouter file kab create kar li......
You can take this file from the code link us in description and comment
has recomposition issue the whole component recomposes on event changes
Explain?
Hi sir, how to reach you?
You can schedule a call by opting the membership check which level you want because there is one separate level for call
@@NativeMobileBits alright thanks
you did not show how you created the navigation
I showed, anyways stay tuned for upcoming videos will show once again in details
hey you can check now our latest videos to find this detail in more detailed approach
This hindi version ?
Love Hindi but we are planning to target global audience so English is the way to go 😇
there is always some kind of error i typed the exact same things still there is some error
Do check other responses on this video before stating this 😇
Could you provide the source code?
Check the pinned comment and description
Hey, there is an andio proble around time 31:00
No there is not 😊 check again
pls make the repo availiable for free
All code repos are available in channel membership
When you get
1. layout.png
2. Lock.xml
3.message.xml
4. Profile.xml
???
I will suggest you should spend some time reading the video description pinned comment etc this has GitHub project link you can find it from there
I am getting an error at 18:11
Code -
@Composable
fun MyTextField(labelValue: String){
val textValue = remember {
mutableStateOf("")
}
OutlinedTextField(
label = {Text(text = labelValue)},
value = textValue,
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Primary,
focusedLabelColor = Primary,
cursorColor = Primary
),
keyboardOptions = KeyboardOptions.Default,
onValueChange ={
textValue.value = it
} )
}
I am getting three errors -
1) OutlinedTextField - None of the following functions can be called with the arguments supplied.
2) label = {Text(text = labelValue)} - @Composable invocations can only happen from the context of a @Composable function
3) textValue.value = it - Unresolved reference: it
Please help me out 🙏
You can use the code from this repo, I have pushed all the code we did in the video here github.com/droid-lover/AppsInJetpackCompose
try to clone / download code from this and then try to compare code check did you miss something, else also this repo will help you solve this error, as this is fully functional
@@NativeMobileBits Is there something that you forgot to tell at the start of the video like any dependency or anything like that
@@KazamaGamingYT no and clone the repo if u need the code
@@NativeMobileBits I did cloned the repo and compared the code written in your project with mine till the part where i completed watching your video but i think your projects gradle files are bit different than mine
sir,
Unresolved reference: it
code :
@Composable
fun MyTextField(labelValue : String)
{
val textValue = remember {
mutableStateOf("")
}
OutlinedTextField(
value = textValue,
label ={ Text(text = labelValue)} ,
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedLabelColor = Grey80,
focusedBorderColor = Color.White,
cursorColor = Grey80
)
,
keyboardOptions = KeyboardOptions.Default,
onValueChange ={
textValue.value = it
}
)
}
Could you please guide me in this error sir. Thank You.
@Akash MADANU it will be solved, clone / download code from this and then try to compare code check did you miss something, else also this repo will help you solve this error, as this is fully functional
github.com/droid-lover/AppsInJetpackCompose
@@NativeMobileBits thank you
@@NativeMobileBits it is not working for the new version of android studio, the following error occurs:
This material API is experimental and is likely to change or to be removed in the future.
@@akashmadanu3994 just use a regular TextField, fixed my issue
@@akashmadanu3994
TextField(
value = textValue.value,
onValueChange = { textValue.value = it },
label = { Text(text = labelValue) },
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Primary,
unfocusedIndicatorColor = Primary,
cursorColor = Primary
),
keyboardOptions = KeyboardOptions.Default,
)
does the same thing, I built the preview and it literally does the same thing. Native Mobile Bits probably used an experimental feature that is constantly being updated, removed and tossed around
Icon on 21:20 :
leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = "")}
Yup