Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Full Stack Development with Angular and GraphQL

You're reading from   Full Stack Development with Angular and GraphQL Learn to build scalable monorepo and a complete Angular app using Apollo, Lerna, and GraphQL

Arrow left icon
Product type Paperback
Published in Mar 2022
Publisher Packt
ISBN-13 9781800202467
Length 390 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Authors (2):
Arrow left icon
Ahmed Bouchefra Ahmed Bouchefra
Author Profile Icon Ahmed Bouchefra
Ahmed Bouchefra
Swathi Prasad Swathi Prasad
Author Profile Icon Swathi Prasad
Swathi Prasad
Arrow right icon
View More author details
Toc

Table of Contents (16) Chapters Close

Preface 1. Part 1: Setting Up the Development Environment, GraphQL Server, and Database
2. Chapter 1: App Architecture and Development Environment FREE CHAPTER 3. Chapter 2: Setting Up GraphQL with Node.js, Express.js, and Apollo 4. Chapter 3: Connecting the Database with TypeORM 5. Chapter 4: Implementing Authentication and Image Uploads with Apollo Server 6. Chapter 5: Adding Realtime Support with Apollo Server 7. Part 2: Building the Angular Frontend with Realtime Support
8. Chapter 6: Angular Application Architecture and Routing 9. Chapter 7: Adding User Search Functionality 10. Chapter 8: Guarding Routes and Testing Authentication 11. Chapter 9: Uploading Images and Adding Posts 12. Chapter 10: Fetching Posts and Adding Comments and Likes 13. Part 3: Adding Realtime Support
14. Chapter 11: Implementing GraphQL Subscriptions 15. Other Books You May Enjoy

Signing up and logging users in

In this section, we'll look at how to use Apollo Client and the Apollo library for Angular to add user authentication to our Angular frontend.

Defining GraphQL documents

Let's begin by defining the GraphQL documents (queries and mutations) required for user registration, signing in, and searching:

  1. Create a shared/constants/auth.ts file (make sure to create the constants/ folder inside the shared/ folder) and begin by adding the following import and two string constants, containing the keys for the access token and authenticated user, which will be used to store the corresponding information in the user's browser's local storage:
    import { gql } from 'apollo-angular'; 
    export const ACCESS_TOKEN: string = 'accessToken'; 
    export const AUTH_USER: string = 'authUser';
  2. Add and export the register mutation that is sent to the backend API for registering users:
    export const REGISTER_MUTATION =...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image