/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ ul: "ul", li: "li", a: "a", p: "p", h2: "h2", img: "img", ol: "ol", strong: "strong", code: "code", pre: "pre", span: "span" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Languages: Node, Express.js" }), "\n", _jsx(_components.li, { children: "Tools Used: Passport.js" }), "\n", _jsx(_components.li, { children: "Time Saved: 4 weeks -> 30 mins" }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/bdcorps/passport-auth-nodejs", children: "Source Code" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://saasbase-auth-advanced.herokuapp.com/", children: "Live Demo" }) }), "\n"] }), "\n", _jsx(_components.p, { children: "This is Part 1 in the series of guides on creating an authentication system using Passport.js, Node.js and Mongo for your SaaS app." }), "\n", _jsx(_components.h2, { children: "Introduction" }), "\n", _jsxs(_components.p, { children: ["Authentication is critical in verifying a user's identity. Passport.js makes it easy to set up OAuth2 login strategies from all identity providers.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2021/06/google-auth.png", alt: "" }), "Basic login screen that allows signing in with a Google account\nIn Part 1, we will:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Build a Google Login button to authenticate users" }), "\n", _jsx(_components.li, { children: "Save and manage user data in MongoDB" }), "\n", _jsx(_components.li, { children: "Give useful notifications using Express Flash to the user" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Step 1: Setup the Google Cloud Project" }), "\n", _jsxs(_components.p, { children: ["In order to add the ", _jsx(_components.strong, { children: "Sign in with Google" }), " button, we have to create the Google Cloud project which will give us the relevant client key and secret to be able to communicate with Google to authenticate a user.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2021/06/image-20210605160540783.png", alt: "image-20210605160540783" }), "Google Cloud Console Dashboard"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Navigate to ", _jsx(_components.a, { href: "https://cloud.google.com/", children: "Google Cloud Console" }), " and add a ", _jsx(_components.strong, { children: "New Project" }), "."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["On the Dashboard, click on ", _jsx(_components.strong, { children: "Go to APIs overview" })] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Select the ", _jsx(_components.strong, { children: "Credentials" }), " tab in the panel on the left side"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Click ", _jsx(_components.strong, { children: "Create Credentials" }), " and then OAuth Client ID"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Select ", _jsx(_components.strong, { children: "Application Type" }), " to be ", _jsx(_components.strong, { children: "Web" })] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Add ", _jsx(_components.strong, { children: "Authorized Redirect URIs" }), " to be: ", _jsx(_components.code, { children: "http://localhost:3000/auth/google" }), " and ", _jsx(_components.code, { children: "http://localhost:3000/auth/google/callback" })] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Google will generate unique ", _jsx(_components.code, { children: "Client ID" }), " and ", _jsx(_components.code, { children: "Client Secret" }), " keys for project. Create a new file called ", _jsx(_components.code, { children: ".env" }), " and add your keys and callback URL in there like so,"] }), "\n", _jsx(_components.p, { children: "CLIENT_ID=107xxx-ni31ps789mf1jd33nnfk57vdllhqcmie.apps.googleusercontent.com\nCLIENT_SECRET=KE5xxxvvm\nCALLBACK_URL=http://localhost:3000/auth/google/callback" }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Our Google Project is all set up and ready to accept requests from our application." }), "\n", _jsx(_components.h2, { children: _jsx(_components.strong, { children: "Step 2: Setup the Node.js project" }) }), "\n", _jsxs(_components.p, { children: ["Let's start by creating a new project folder. Add a ", _jsx(_components.code, { children: "package.json" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-json", children: [_jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"name\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"auth-basic-nodejs\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"version\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"1.0.0\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"author\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"sssaini\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"description\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"auth-basic\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"main\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"app.js\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"scripts\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"start\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"node app.js\"" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"license\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"ISC\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"dependencies\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"bcrypt\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^5.0.1\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"body-parser\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^1.18.2\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"connect-flash\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^0.1.1\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"cookie-parser\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^1.4.5\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"dotenv\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^8.2.0\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"ejs\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^3.1.5\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"express\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^4.17.1\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"express-flash\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"0.0.2\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"express-session\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^1.17.1\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"mongoose\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^5.7.1\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"passport\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^0.4.1\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"passport-google-oauth20\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^2.0.0\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"passport-local\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^1.0.0\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"uuid\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"^8.3.2\"" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Install dependencies by running," }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm install\n" }) }), "\n", _jsx(_components.h2, { children: _jsx(_components.strong, { children: "Step 3: Set up a basic Express Server" }) }), "\n", _jsxs(_components.p, { children: ["Create a new file named ", _jsx(_components.code, { children: "app.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"dotenv\"" }), ").", _jsx(_components.span, { className: "hljs-title function_", children: "config" }), "();\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " express = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"express\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " app = ", _jsx(_components.span, { className: "hljs-title function_", children: "express" }), "();\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " bodyParser = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"body-parser\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " cookieParser = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"cookie-parser\"" }), ");\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(bodyParser.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "());\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(\n bodyParser.", _jsx(_components.span, { className: "hljs-title function_", children: "urlencoded" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "extended" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n })\n);\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "engine" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"html\"" }), ", ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"ejs\"" }), ").", _jsx(_components.span, { className: "hljs-property", children: "renderFile" }), ");\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(express.", _jsx(_components.span, { className: "hljs-title function_", children: "static" }), "(__dirname + ", _jsx(_components.span, { className: "hljs-string", children: "\"/public\"" }), "));\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "cookieParser" }), "());\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "get" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"/\"" }), ", ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "req, res" }), ") =>"] }), " {\n res.", _jsx(_components.span, { className: "hljs-title function_", children: "render" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"index.ejs\"" }), ");\n});\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "listen" }), "(", _jsx(_components.span, { className: "hljs-number", children: "3000" }), ", ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " (", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"SaaSBase Authentication Server listening on port 3000\"" }), ");\n});\n"] }) }), "\n", _jsxs(_components.p, { children: ["We will use the ", _jsx(_components.code, { children: "public" }), " folder to serve any static files like images, CSS, and JS. We are also using a templating engine called EJS so we can generate a dynamic HTML page by rendering information sent by the server."] }), "\n", _jsxs(_components.p, { children: ["Let's add a simple view in the file, ", _jsx(_components.code, { children: "views/index.ejs" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-meta", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "html" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "lang" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"en\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "head" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "title" }), ">"] }), "Document", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "body" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "Hello World", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Launch the app by running," }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm start\n" }) }), "\n", _jsxs(_components.p, { children: ["The application should be live at ", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "."] }), "\n", _jsx(_components.p, { children: "All the basic setup is now done! Let's move on to the meat of the application." }), "\n", _jsx(_components.h2, { children: _jsx(_components.strong, { children: "Step 4: Start a Local Mongo DB" }) }), "\n", _jsxs(_components.p, { children: ["We need a database. MongoDB is a very good choice. Download the community version ", _jsx(_components.a, { href: "https://www.mongodb.com/try/download/community", children: "here" }), ". Run,"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "mongod\n" }) }), "\n", _jsxs(_components.p, { children: ["A local Mongo instance should start up on ", _jsx(_components.code, { children: "mongo://localhost:27017" })] }), "\n", _jsx(_components.h2, { children: _jsx(_components.strong, { children: "Step 5: Add MongoDB Connection to App" }) }), "\n", _jsxs(_components.p, { children: ["Add the MongoDB connection to ", _jsx(_components.code, { children: "app.js" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " mongoose = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"mongoose\"" }), ");\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " db = ", _jsx(_components.span, { className: "hljs-string", children: "\"mongodb://localhost:27017/auth\"" }), ";\nmongoose.", _jsx(_components.span, { className: "hljs-title function_", children: "connect" }), "(\n db,\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "useUnifiedTopology" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "useNewUrlParser" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "useFindAndModify" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "useCreateIndex" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n },\n ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "error" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error) ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(error);\n }\n);\n"] }) }), "\n", _jsx(_components.h2, { children: _jsx(_components.strong, { children: "Step 6: Create the User Model" }) }), "\n", _jsxs(_components.p, { children: ["Create a new file called, ", _jsx(_components.code, { children: "src/user/user.model.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "let" }), " mongoose = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"mongoose\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "let" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Schema" }), " = mongoose.", _jsx(_components.span, { className: "hljs-property", children: "Schema" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " userSchema = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Schema" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "String" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "default" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "String" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "required" }), ": [", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "\"email required\"" }), "],\n ", _jsx(_components.span, { className: "hljs-attr", children: "unique" }), ": [", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "\"email already registered\"" }), "],\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "firstName" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "String" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "lastName" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "String" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "profilePhoto" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "String" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "password" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "String" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "source" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "String" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "required" }), ": [", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "\"source not specified\"" }), "],\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "lastVisited" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Date" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "default" }), ": ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Date" }), "(),\n },\n});\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "var" }), " userModel = mongoose.", _jsx(_components.span, { className: "hljs-title function_", children: "model" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"user\"" }), ", userSchema, ", _jsx(_components.span, { className: "hljs-string", children: "\"user\"" }), ");\n\n", _jsx(_components.span, { className: "hljs-variable language_", children: "module" }), ".", _jsx(_components.span, { className: "hljs-property", children: "exports" }), " = userModel;\n"] }) }), "\n", _jsxs(_components.p, { children: ["Create a new file called - ", _jsx(_components.code, { children: "src/user/user.service.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "addGoogleUser" }), " =\n (", _jsx(_components.span, { className: "hljs-params", children: "User" }), ") =>\n ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ id, email, firstName, lastName, profilePhoto }" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " user = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), "({\n id,\n email,\n firstName,\n lastName,\n profilePhoto,\n ", _jsx(_components.span, { className: "hljs-attr", children: "source" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"google\"" }), ",\n });\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " user.", _jsx(_components.span, { className: "hljs-title function_", children: "save" }), "();\n };\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "getUsers" }), " = (", _jsx(_components.span, { className: "hljs-params", children: "User" }), ") => ", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "find" }), "({});\n};\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "getUserByEmail" }), " =\n (", _jsx(_components.span, { className: "hljs-params", children: "User" }), ") =>\n ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ({ email }) => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "findOne" }), "({\n email,\n });\n };\n\n", _jsx(_components.span, { className: "hljs-variable language_", children: "module" }), ".", _jsx(_components.span, { className: "hljs-property", children: "exports" }), " = ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "User" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "addGoogleUser" }), ": ", _jsx(_components.span, { className: "hljs-title function_", children: "addGoogleUser" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), "),\n ", _jsx(_components.span, { className: "hljs-attr", children: "getUsers" }), ": ", _jsx(_components.span, { className: "hljs-title function_", children: "getUsers" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), "),\n ", _jsx(_components.span, { className: "hljs-attr", children: "getUserByEmail" }), ": ", _jsx(_components.span, { className: "hljs-title function_", children: "getUserByEmail" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), "),\n };\n};\n"] }) }), "\n", _jsxs(_components.p, { children: ["We can now inject the model into the service by adding ", _jsx(_components.code, { children: "src/user/index.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), " = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"./user.model\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "UserService" }), " = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"./user.service\"" }), ");\n\n", _jsx(_components.span, { className: "hljs-variable language_", children: "module" }), ".", _jsx(_components.span, { className: "hljs-property", children: "exports" }), " = ", _jsx(_components.span, { className: "hljs-title class_", children: "UserService" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), ");\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 7: Set up Passport.js for Google" }), "\n", _jsx(_components.p, { children: "Passport.js is a great NPM package that simplifies adding a social login to a web app. We will use the Google Strategy to authenticate a user with their Gmail account." }), "\n", _jsxs(_components.p, { children: ["Create a file called ", _jsx(_components.code, { children: "src/config/google.js" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " passport = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"passport\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), " = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"../user/user.model\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "GoogleStrategy" }), " = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"passport-google-oauth20\"" }), ").", _jsx(_components.span, { className: "hljs-property", children: "Strategy" }), ";\n\npassport.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(\n ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "GoogleStrategy" }), "(\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "callbackURL" }), ": process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "CALLBACK_URL" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "clientID" }), ": process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "CLIENT_ID" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "clientSecret" }), ": process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "CLIENT_SECRET" }), ",\n },\n ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (accessToken, refreshToken, profile, done) => {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"user profile is: \"" }), ", profile);\n }\n )\n);\n"] }) }), "\n", _jsxs(_components.p, { children: ["Perfect, let's now add the strategy as part of a ", _jsx(_components.code, { children: "GET" }), " route so we can invoke it and trigger the Google Auth flow."] }), "\n", _jsxs(_components.p, { children: ["In ", _jsx(_components.code, { children: "app.js" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-comment", children: "//..." }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " passport = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"passport\"" }), ");\n\n", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"./src/config/google\"" }), ");\n\n", _jsx(_components.span, { className: "hljs-comment", children: "//..." }), "\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(passport.", _jsx(_components.span, { className: "hljs-title function_", children: "initialize" }), "());\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(passport.", _jsx(_components.span, { className: "hljs-title function_", children: "session" }), "());\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "get" }), "(\n ", _jsx(_components.span, { className: "hljs-string", children: "\"/auth/google\"" }), ",\n passport.", _jsx(_components.span, { className: "hljs-title function_", children: "authenticate" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"google\"" }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "scope" }), ": [", _jsx(_components.span, { className: "hljs-string", children: "\"profile\"" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "\"email\"" }), "],\n })\n);\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "get" }), "(\n ", _jsx(_components.span, { className: "hljs-string", children: "\"/auth/google/callback\"" }), ",\n passport.", _jsx(_components.span, { className: "hljs-title function_", children: "authenticate" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"google\"" }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "failureRedirect" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "successRedirect" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/profile\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "failureFlash" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "successFlash" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Successfully logged in!\"" }), ",\n })\n);\n"] }) }), "\n", _jsx(_components.p, { children: "Run the application with:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm start\n" }) }), "\n", _jsxs(_components.p, { children: ["Once started, we can try logging in by navigating to ", _jsx(_components.a, { href: "http://localhost:3000/auth/google", children: "http://localhost:3000/auth/google" }), "\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2021/06/image-4.png", alt: "" }), "Google's OAuth Login screen triggered by \"Sign in with Google\" button\nThe application might hang after a successful login but don't worry about that just yet. We will fix that in a bit. Looking at the console however, we will see a JSON response from Google like so,"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-json", children: [_jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n id", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'xxx'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n displayName", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'Sukhpal Saini'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n name", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), " familyName", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'Saini'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), " givenName", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'Sukhpal' ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n emails", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "[" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), " value", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'sunnyashiin@gmail.com'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), " verified", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-literal", children: _jsx(_components.span, { className: "hljs-keyword", children: "true" }) }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "]" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n photos", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "[" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n value", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'https", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), _jsx(_components.span, { className: "hljs-comment", children: "//lh3.googleusercontent.com/a-/AOh14GjSb0KZnfOv_wP8cT6M7wEoGMlpG1fFbsO1Uszm7lw=s96-c'" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "]" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n provider", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'google'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n _raw", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " '", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\\n' +\n ' ", _jsx(_components.span, { className: "hljs-attr", children: "\"sub\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"xxx\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\\n' +\n ' ", _jsx(_components.span, { className: "hljs-attr", children: "\"name\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"Sukhpal Saini\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\\n' +\n ' ", _jsx(_components.span, { className: "hljs-attr", children: "\"given_name\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"Sukhpal\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\\n' +\n ' ", _jsx(_components.span, { className: "hljs-attr", children: "\"family_name\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"Saini\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\\n' +\n ' ", _jsx(_components.span, { className: "hljs-attr", children: "\"picture\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"https://lh3.googleusercontent.com/a-/AOh14GjSb0KZnfOv_wP8cT6M7wEoGMlpG1fFbsO1Uszm7lw\\\\u003ds96-c\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\\n' +\n ' ", _jsx(_components.span, { className: "hljs-attr", children: "\"email\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"sunnyashiin@gmail.com\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\\n' +\n ' ", _jsx(_components.span, { className: "hljs-attr", children: "\"email_verified\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-literal", children: _jsx(_components.span, { className: "hljs-keyword", children: "true" }) }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\\n' +\n ' ", _jsx(_components.span, { className: "hljs-attr", children: "\"locale\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"en-GB\"" }), "\\n' +\n '", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n _json", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n sub", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'xxx'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n name", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'Sukhpal Saini'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n given_name", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'Sukhpal'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n family_name", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'Saini'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n picture", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'https", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), _jsx(_components.span, { className: "hljs-comment", children: "//lh3.googleusercontent.com/a-/AOh14GjSb0KZnfOv_wP8cT6M7wEoGMlpG1fFbsO1Uszm7lw=s96-c'," }), "\n email", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'sunnyashiin@gmail.com'", _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n email_verified", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-literal", children: _jsx(_components.span, { className: "hljs-keyword", children: "true" }) }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n locale", _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " 'en-GB'\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Perfect, Google has just validated our user for us and provided us with their profile information." }), "\n", _jsx(_components.h2, { children: "Step 8: Save User Details" }), "\n", _jsx(_components.p, { children: "We can save this information in our MongoDB database." }), "\n", _jsxs(_components.p, { children: ["In ", _jsx(_components.code, { children: "config/google.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " passport = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"passport\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "UserService" }), " = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"../user\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "GoogleStrategy" }), " = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"passport-google-oauth20\"" }), ").", _jsx(_components.span, { className: "hljs-property", children: "Strategy" }), ";\n\npassport.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(\n ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "GoogleStrategy" }), "(\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "callbackURL" }), ": process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "CALLBACK_URL" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "clientID" }), ": process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "CLIENT_ID" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "clientSecret" }), ": process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "CLIENT_SECRET" }), ",\n },\n ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (accessToken, refreshToken, profile, done) => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " id = profile.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " email = profile.", _jsx(_components.span, { className: "hljs-property", children: "emails" }), "[", _jsx(_components.span, { className: "hljs-number", children: "0" }), "].", _jsx(_components.span, { className: "hljs-property", children: "value" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " firstName = profile.", _jsx(_components.span, { className: "hljs-property", children: "name" }), ".", _jsx(_components.span, { className: "hljs-property", children: "givenName" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " lastName = profile.", _jsx(_components.span, { className: "hljs-property", children: "name" }), ".", _jsx(_components.span, { className: "hljs-property", children: "familyName" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " profilePhoto = profile.", _jsx(_components.span, { className: "hljs-property", children: "photos" }), "[", _jsx(_components.span, { className: "hljs-number", children: "0" }), "].", _jsx(_components.span, { className: "hljs-property", children: "value" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " source = ", _jsx(_components.span, { className: "hljs-string", children: "\"google\"" }), ";\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " currentUser = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "UserService" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getUserByEmail" }), "({\n email,\n });\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!currentUser) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " newUser = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "UserService" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "addGoogleUser" }), "({\n id,\n email,\n firstName,\n lastName,\n profilePhoto,\n });\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "done" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ", newUser);\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (currentUser.", _jsx(_components.span, { className: "hljs-property", children: "source" }), " != ", _jsx(_components.span, { className: "hljs-string", children: "\"google\"" }), ") {\n ", _jsx(_components.span, { className: "hljs-comment", children: "//return error" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "done" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ", ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "message" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "`You have previously signed up with a different signin method`" }), ",\n });\n }\n\n currentUser.", _jsx(_components.span, { className: "hljs-property", children: "lastVisited" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Date" }), "();\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "done" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ", currentUser);\n }\n )\n);\n"] }) }), "\n", _jsxs(_components.p, { children: ["Create a file called ", _jsx(_components.code, { children: "config/passport.js" }), ". This will keep our passport configuration."] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " passport = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"passport\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), " = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"../user/user.model\"" }), ");\n\npassport.", _jsx(_components.span, { className: "hljs-title function_", children: "serializeUser" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "user, done" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "done" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ", user.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ");\n});\n\npassport.", _jsx(_components.span, { className: "hljs-title function_", children: "deserializeUser" }), "(", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (id, done) => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " currentUser = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "findOne" }), "({\n id,\n });\n ", _jsx(_components.span, { className: "hljs-title function_", children: "done" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ", currentUser);\n});\n"] }) }), "\n", _jsxs(_components.p, { children: ["We can add the passport configuration to ", _jsx(_components.code, { children: "app.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-comment", children: "//..." }), "\n\n", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"./src/config/passport\"" }), ");\n", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"./src/config/google\"" }), ");\n\n", _jsx(_components.span, { className: "hljs-comment", children: "//..." }), "\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 9: Build the UI - Google Login screen" }), "\n", _jsxs(_components.p, { children: ["Add a new file - ", _jsx(_components.code, { children: "views/index.ejs" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-meta", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "html" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "lang" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"en\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "head" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "meta" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "charset" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"utf-8\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "meta" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"viewport\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"width=device-width, initial-scale=1, shrink-to-fit=no\"" }), "\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "meta" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"description\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "title" }), ">"] }), "SaaSBase - Authentication", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "link" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "rel" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"stylesheet\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "integrity" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "crossorigin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"anonymous\"" }), "\n />"] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "link" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"./css/index.css\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "rel" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"stylesheet\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "body" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"links\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/local/signup\"" }), ">"] }), "Sign up using Email →", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"content\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "form" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-center\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "action" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/auth/google\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "method" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"get\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/\"" }), "\n >"] }), _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "img" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mb-4\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"./images/saasbase.png\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "width" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"72\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "height" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"72\"" }), "\n />"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h3 mb-3 font-weight-normal\"" }), ">"] }), "Sign in with Google", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mb-3 text-muted\"" }), ">"] }), "\n Implement a Google OAuth strategy using Passport.js and MongoDB\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"btn btn-primary btn-block my-2\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"submit\"" }), ">"] }), "\n Sign in with Google\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mt-5 mb-3 text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-muted\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://saasbase.dev\"" }), ">"] }), "\n Built by SaaSBase\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "script" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://code.jquery.com/jquery-3.5.1.slim.min.js\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "integrity" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "crossorigin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"anonymous\"" }), "\n >"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "script" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "integrity" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "crossorigin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"anonymous\"" }), "\n >"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsxs(_components.p, { children: ["Add a new CSS file - ", _jsx(_components.code, { children: "public/css/index.css" }), " and copy over the styles from ", _jsx(_components.a, { href: "https://github.com/bdcorps/passport-auth-nodejs/blob/main/public/css/index.css", children: "here" }), ".\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2021/06/google-auth-1.png", alt: "" }), "Completed login screen with styling that allows signing in with a Google account"] }), "\n", _jsx(_components.h2, { children: "Step 10: Add Flash Messages" }), "\n", _jsxs(_components.p, { children: ["With Passport.js we can communicate back to the user when their credentials are rejected using flash messages. To add them in, edit ", _jsx(_components.code, { children: "app.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " flash = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"express-flash\"" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " session = ", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"express-session\"" }), ");\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(\n ", _jsx(_components.span, { className: "hljs-title function_", children: "session" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "secret" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"secr3t\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "resave" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "saveUninitialized" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n })\n);\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "flash" }), "());\n"] }) }), "\n", _jsxs(_components.p, { children: ["To render these messages in EJS, we can edit ", _jsx(_components.code, { children: "views/index.ejs" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: ["\n\n<% ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " ( messages.", _jsx(_components.span, { className: "hljs-property", children: "error" }), ") { %>\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"error-text\"" }), ">"] }), "<%= messages.error %>", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n<% } %>\n\n\n"] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2021/06/error-2.png", alt: "" }), "Login screen with flash messages that notifies the user when a sign in attempt fails"] }), "\n", _jsx(_components.h2, { children: "Step 11: Build the UI - Profile screen" }), "\n", _jsx(_components.p, { children: "After a successful login, we should send the user to a profile screen where they can see their data." }), "\n", _jsx(_components.p, { children: "The profile route has to be protected so that non logged in users cannot go to the page and are redirected." }), "\n", _jsxs(_components.p, { children: ["In ", _jsx(_components.code, { children: "app.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: [_jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "isLoggedIn" }), " = (", _jsx(_components.span, { className: "hljs-params", children: "req, res, next" }), ") => {\n req.", _jsx(_components.span, { className: "hljs-property", children: "user" }), " ? ", _jsx(_components.span, { className: "hljs-title function_", children: "next" }), "() : res.", _jsx(_components.span, { className: "hljs-title function_", children: "sendStatus" }), "(", _jsx(_components.span, { className: "hljs-number", children: "401" }), ");\n};\n\napp.", _jsx(_components.span, { className: "hljs-title function_", children: "get" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"/profile\"" }), ", isLoggedIn, ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "req, res" }), ") =>"] }), " {\n res.", _jsx(_components.span, { className: "hljs-title function_", children: "render" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"profile.ejs\"" }), ", { ", _jsx(_components.span, { className: "hljs-attr", children: "user" }), ": req.", _jsx(_components.span, { className: "hljs-property", children: "user" }), " });\n});\n"] }) }), "\n", _jsxs(_components.p, { children: ["Create a new file named ", _jsx(_components.code, { children: "src/views/profile.ejs" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-meta", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "html" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "lang" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"en\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-100\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "head" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "meta" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "charset" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"utf-8\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "meta" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"viewport\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"width=device-width, initial-scale=1, shrink-to-fit=no\"" }), "\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "meta" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"description\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "title" }), ">"] }), "SaaSBase - Authentication", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "link" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "rel" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"stylesheet\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "integrity" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "crossorigin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"anonymous\"" }), "\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "body" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"d-flex flex-column h-100\"" }), ">"] }), "\n ", _jsx(_components.span, { className: "hljs-comment", children: "" }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "main" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "role" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"main\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-shrink-0\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mt-5\"" }), ">"] }), "User Profile", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "hr" }), " />"] }), "\n <% if ( user ) { %>\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"row\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"col-md-2\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "img" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://lh3.googleusercontent.com/a-/AOh14GjSb0KZnfOv_wP8cT6M7wEoGMlpG1fFbsO1Uszm7lw=s96-c\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"img-fluid\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "style" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"width: 100%\"" }), "\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"col-md-10\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), ">"] }), "\n <%= user.firstName %> <%= user.lastName %> (#<%= user.id %>)\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "Logged in using <%= user.source %>", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "<%= user.email %>", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "Last visted on <%= user.lastVisited %>", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/auth/logout\"" }), ">"] }), "Logout", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n <% } else { %>\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), ">"] }), "User not found", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n <% } %>\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "footer" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"footer mt-auto py-3\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-muted\"" }), "\n >"] }), "The full guide is available at\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://saasbase.dev/\"" }), ">"] }), "saasbase.dev", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "script" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://code.jquery.com/jquery-3.5.1.slim.min.js\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "integrity" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "crossorigin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"anonymous\"" }), "\n >"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "script" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "integrity" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "crossorigin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"anonymous\"" }), "\n >"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.h2, { children: "Step 12: Logout a User" }), "\n", _jsxs(_components.p, { children: ["In ", _jsx(_components.code, { children: "app.js" })] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-js", children: ["app.", _jsx(_components.span, { className: "hljs-title function_", children: "get" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"/auth/logout\"" }), ", ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "req, res" }), ") =>"] }), " {\n req.", _jsx(_components.span, { className: "hljs-title function_", children: "flash" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"success\"" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "\"Successfully logged out\"" }), ");\n req.", _jsx(_components.span, { className: "hljs-property", children: "session" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "destroy" }), "(", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " (", _jsx(_components.span, { className: "hljs-params" }), ") {\n res.", _jsx(_components.span, { className: "hljs-title function_", children: "clearCookie" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"connect.sid\"" }), ");\n res.", _jsx(_components.span, { className: "hljs-title function_", children: "redirect" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"/\"" }), ");\n });\n});\n"] }) }), "\n", _jsx(_components.h2, { children: _jsx(_components.strong, { children: "Next Steps" }) }), "\n", _jsx(_components.p, { children: "Congratulations, we just built a great-looking Google Sign In button! We learned how to:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Build a Google Login button to authenticate users" }), "\n", _jsx(_components.li, { children: "Save and manage user data in MongoDB" }), "\n", _jsx(_components.li, { children: "Give useful notifications using Express Flash to the user" }), "\n"] }), "\n", _jsx(_components.p, { children: "There's still room for improvement. Currently, our application can only be used by folks that have a Google account. We can solve this by having local signup as an authentication method." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Authentication

.css-277wjy{position:static;color:var(--chakra-colors-gray-800);}.css-277wjy::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:0;width:100%;height:100%;}Authentication System using Passport.js, Node.js, and MongoDB - Part 1: Google Login

Authentication System using Passport.js, Node.js, and MongoDB - Part 2: Local Sign up and Sign in

Authentication System using Passport.js, Node.js, and MongoDB - Part 1: Google Login