1 of 30

Presenters Today:

Andy

Stackschool Session 6

Users &�Authentication

2 of 30

Link to Slides

http://tinyurl.com/stackschool-session-6

​

​

Link to Demo - Session 6

http://tinyurl.com/Stackschool-Demo

​

​

3 of 30

ACM Membership Portal Sign-in

andeez nuts

(against my will)

http://members.uclaacm.com/

4 of 30

Sign-ups are now live!

12-hour beginner-friendly hackathon

​

Applications due February 26th

http://tinyurl.com/hoth-xi-apply

​

https://hoth.uclaacm.com

​

​

5 of 30

Curriculum

  • Week 2: Intro to Full Stack Mobile Dev
  • Week 3: Frontend
  • Week 4: SQL
  • Week 5: Servers
  • Week 6: Backend Integration
  • Week 7: User Authentication
  • Week 8: Working with external APIs
  • Week 9: Project Showcase

6 of 30

Agenda for today

  • SQL Recap
  • User API Endpoints
  • Barebones Security
    • Bcrypt
  • Register + Login Screens
  • Asynchronous Storage

7 of 30

Agenda for today

  • SQL Recap
  • User API Endpoints
  • Barebones Security
    • Bcrypt
  • Register + Login Screens
  • Asynchronous Storage

8 of 30

Recap: SQL DB + Tables

  • Three tables
    • users
    • songs
    • song_likes

​

9 of 30

Recap: SQL DB + Tables

  • TL;DR
    • We don’t have any endpoints to manage users!
    • INSERT INTO users (email, username, first, last, password) VALUES (blah, blah, blah….)
    • getUser returns a hardcoded userID to fetch

10 of 30

Agenda for today

  • SQL Recap
  • User API Endpoints
  • Barebones Security
    • Bcrypt
  • Register + Login Screens
  • Asynchronous Storage

11 of 30

Theorycrafting our Endpoints

  • Current API has
    • app.get("/songs/all" - get all songs
    • app.get("/songs/:id" - get song by id
    • app.get("/songs/user/:songId" - get song’s userid
    • app.post("/songs" - create a song
    • app.delete("/songs/delete/:id" - delete a song

​

12 of 30

Theorycrafting our Endpoints

  • Our Users API should have:
    • app.post("/register" - create a user
    • app.post("/login" - login a user

​

​

13 of 30

Theorycrafting our Endpoints

  • Our Users API should have:
    • app.post("/register" - create a user
    • app.post("/login" - login a user
  • For testing and management:
    • app.get("/users/all" - list all users
    • app.delete("/users/delete/:userId" - delete a user
    • app.get("/users/:userId" - get a user
    • app.get("/users/songs/:userId" - list user’s songs

​

​

​

14 of 30

Users & Auth Demo

backend/index.js

15 of 30

Agenda for today

  • SQL Recap
  • User API Endpoints
  • Barebones Security
    • Bcrypt
  • Register + Login Screens
  • Asynchronous Storage

16 of 30

Securing our Backend

  • Right now, our passwords are being stored in our DB as plaintext
  • Securely store them using a strong, validated hashing function!
    • Bcrypt, argon2, SHA256

​

​

​

17 of 30

Hashing (for security)

  • creates a irreversible representation of data
  • NOT encryption- no key or way to reverse a hash
  • great for storing passwords in databases!

​

​

​

18 of 30

Salting (for security)

  • added layer of security and helps prevent rainbow table generation
  • allows for duplicate passwords (in this case) to be stored, as a random salt will always generate a unique hash

19 of 30

Bcrypt

  • uses a “slow” hashing function that is secure as long as we enforce a strong password with regex

​

​

​

20 of 30

Securing our Requests

  • Passwords stored as hashes ✅
  • Passwords are still sent as plaintext in our HTTP requests ❌
  • HTTP -> HTTPS for encrypting the data in our requests!

​

​

​

21 of 30

Back to the demo…

backend/index.js

22 of 30

Agenda for today

  • SQL Recap
  • User API Endpoints
  • Barebones Security
    • Bcrypt
  • Register + Login Screens
  • Asynchronous Storage

23 of 30

Register Screen

  • inputs:
    • unique email
    • username
    • first name
    • last name
    • password
    • confirm password
  • send data to the “/register” endpoint

24 of 30

Login Screen

  • inputs:
    • username
    • password
  • send data to the “/login” endpoint

25 of 30

And more demo…

frontend/screens/LoginScreen.jsx, frontend/screens/RegisterScreen.jsx,

frontend/App.jsx

26 of 30

Agenda for today

  • SQL Recap
  • User API Endpoints
  • Barebones Security
    • Bcrypt
  • Register + Login Screens
  • Asynchronous Storage

27 of 30

Async Storage

  • simple, asynchronous, persistent, key-value storage system
  • basically, you can storage tiny bits of data between app restarts and device reboots

​

​

​

28 of 30

And even more demo…

frontend/utils.js

29 of 30

For more information

  • https://github.com/uclaacm/stackschool-running_demo-w24
    • Getting stuck? Check out the completed version here!
    • Check out the GitHub if you want to follows along with SoundsRight!

30 of 30

Thanks for Coming!

Next Week:

Spotify API