Day-14: Authentication for ShowwcaseXS

Today is 7 May 2023, and till now I have worked on the development of the Discover feed API. The majority of the user interface was completed yesterday, but there were some additional fixes required to handle various types of data, which took some time to improve upon. Now, my next task is to begin work on the authentication process.

During this hackathon, we are unable to use Showwcase's authentication service, meaning that we cannot authenticate using an email address and password from Showwcase. However, we do have access to the API key. Thus, I must pass the API key and, if it is correct, the user should be able to log in. Although I have not created a wireframe for the login screen, I will experiment and develop something. Currently, my priority is to complete the basic authentication flow, and I can later focus on designing and improving it.

I have finished designing the login screen for ShowwcaseXS and have also implemented the disable functionality, which means that the enter button will be disabled if the input field is empty. As the user starts typing, the enter button will be enabled. Additionally, to enhance the user experience, I have included a clear button that can be used to erase the input field. Also, have added a logout button at the top for now. Let me share the design with you.

After considering various methods, I have decided to use local storage to access the API. The process will involve setting the API key to the local storage when the user enters it and clicks the enter button. When the next screen loads, it will check for the API key's presence and utilize it to make the API call if it exists. Currently, I am working on the Profile screen, so will do an API call for the profile details using this key from the local storage. If the API key is correct, the user will be logged in, but if it is incorrect, the screen will display an "Unauthorized" message. If the API key does not exist, the user will not be able to log in.

Initially, the implementation for authentication appeared to be simple and straightforward. However, after investing a few hours into the process, it turned out to be more complex than anticipated. Eventually, I was able to enable login with API keys and added an error message in case of invalid keys. Next on my agenda is the profile screen. I have already created a UI design for it, but now I need to develop it by integrating the API call. This task may take some time as I have to work on both integrating the API and developing the UI simultaneously.

Finally, I have finished working on the profile section, as well as authentication, and have added logout functionality. From now on, users will be able to log in using their API key and access the profile screen. But I have to make it global so that users cannot access any of the features without logging in. To achieve this, I will integrate the login component with the layout section so that the user can only see the screens if they are authenticated. I'm not that happy with the design but is okay for now. Let me show you the screen.

Now my next task is to create the global Login component for ShowwcaseXS, right now it is limited to the user profile screen. I know it will be challenging but I have to do it anyways. Tomorrow I'll be getting started with that!